/*
  Imena Property Management

  This stylesheet provides the visual design for the Imena Property
  Management website. It establishes a simple colour palette and
  typography, defines responsive layout containers and grids, and
  styles common components such as navigation bars, hero sections,
  cards, forms and footers. The design emphasises clarity and
  professionalism to inspire confidence in prospective clients.
*/

/* Reset and global styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #222;
  background-color: #f9f9f9;
}

h1, h2, h3 {
  color: #0A3D62;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Colour palette variables */
:root {
  --primary: #0A3D62;      /* deep blue for headers and nav */
  --secondary: #F9A825;    /* warm gold accent */
  --light: #ffffff;        /* white for panels */
  --muted: #f1f5f9;        /* very light grey background */
  --dark-text: #222222;    /* dark text */
  --shadow: rgba(0, 0, 0, 0.05);
}

/* Container for centralised content */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Header and navigation */
.site-header {
  background-color: var(--primary);
  color: var(--light);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px var(--shadow);
}

.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

/*
  The logo is displayed as an image in the navigation bar.  To maintain
  the existing layout, the `.logo` class is still used as a container
  but it now simply holds an `<img>` element.  The image height is
  constrained so it scales responsively while preserving its aspect
  ratio.  We remove the previous typographic styles because the
  company name is drawn directly within the logo artwork.
*/
.logo img {
  height: 42px;
  width: auto;
}

.main-nav ul {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* Push the dashboard/login link to the far right on desktop */
#dashboardNavItem {
  margin-left: auto;
}

/* Make the dashboard/login link look like a button */
#dashboardLink {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.55rem 1rem;
}

#dashboardLink:hover,
#dashboardLink:focus {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--light);
}

/* Account + Logout links (hidden until authenticated) */
#accountLink,
#logoutLink {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.55rem 1rem;
}

#accountLink:hover,
#accountLink:focus,
#logoutLink:hover,
#logoutLink:focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--light);
}

.main-nav a {
  font-size: 1rem;
  color: var(--light);
  padding: 0.5rem;
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--secondary);
}

/* Utility */
.hidden {
  display: none !important;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--light);
}


/* Mobile menu button content */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.hamburger {
  width: 22px;
  height: 2px;
  background: var(--light);
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--light);
  border-radius: 2px;
}

.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

.navToggleLabel {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* Hero section */
.hero {
  position: relative;
  color: var(--light);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  padding: 0 1rem;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--light);
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--light);
  line-height: 1.5;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--secondary);
  color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #d18d1b;
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--secondary);
  color: var(--secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--secondary);
  color: var(--primary);
}

/* Section generic styling */
section {
  padding: 4rem 0;
}

section:nth-of-type(even) {
  background-color: var(--muted);
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

/* About section */
.about .content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about .content p {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Services grid */
.service-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.service-item {
  background-color: var(--light);
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow);
  text-align: center;
}

.service-item .service-icon {
  font-size: 2.5rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.service-item h3 {
  margin-bottom: 0.5rem;
}

/* Packages */
.packages-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2rem;
}

.package-item {
  background-color: var(--light);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.package-item h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.package-item ul {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  list-style: disc;
  color: var(--dark-text);
}

.package-item .package-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1rem;
}

/* FAQ */
.faq-item {
  margin-bottom: 1.5rem;
}

.faq-item h4 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* Login */
.auth-card {
  max-width: 520px;
  margin: 0 auto;
  background-color: var(--light);
  padding: 2rem;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}

.stat-card {
  grid-column: span 12;
  background-color: var(--light);
  padding: 1.25rem;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card h3 {
  margin: 0 0 0.25rem 0;
  color: var(--primary);
}

.stat-card .stat {
  font-size: 1.8rem;
  font-weight: 800;
}

.table-wrap {
  overflow-x: auto;
  background-color: var(--light);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-align: left;
  vertical-align: top;
}

th {
  background-color: rgba(10, 61, 98, 0.06);
  color: var(--primary);
  font-weight: 700;
}

@media (min-width: 700px) {
  .stat-card { grid-column: span 4; }
}

/* Properties for rent */
.listing-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.listing-card {
  background: var(--light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.listing-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.listing-card .content {
  padding: 1.25rem;
}

.pill {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(199, 161, 91, 0.18);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
}

@media (min-width: 800px) {
  .listing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Team */
.team-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.team-card {
  background: var(--light);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.team-card h3 { margin-top: 0; }

@media (min-width: 800px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 0 auto;
}

.testimonial-item {
  background-color: var(--light);
  padding: 1.5rem;
  border-left: 4px solid var(--secondary);
  box-shadow: 0 2px 6px var(--shadow);
}

.testimonial-quote {
  font-style: italic;
  margin-bottom: 0.5rem;
}

.testimonial-author {
  font-weight: 600;
  color: var(--primary);
}

/* Contact & Forms */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.contact-info {
  flex: 1;
  min-width: 260px;
}

.contact-info ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social-links a {
  margin-right: 0.5rem;
  font-size: 1.3rem;
  color: var(--primary);
}

.social-links a:hover {
  color: var(--secondary);
}

.contact-form {
  flex: 1;
  min-width: 280px;
  background-color: var(--light);
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow);
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
}

/* Notices (inline alerts) */
.notice {
  background: rgba(39, 174, 96, 0.12);
  border: 1px solid rgba(39, 174, 96, 0.25);
  color: #1f6f3f;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  font-size: 0.95rem;
}

/* Password fields with show/hide toggle */
.password-row {
  position: relative;
  display: flex;
  align-items: center;
}

.password-row input {
  padding-right: 2.5rem;
}

.password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  color: #666;
  padding: 0.25rem;
}

.password-toggle:focus {
  outline: 2px solid rgba(10, 61, 98, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Footer */
.site-footer {
  background-color: var(--primary);
  color: var(--light);
  text-align: center;
  padding: 1rem 0;
  font-size: 0.9rem;
}

.site-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer .footer-links {
  display: flex;
  gap: 1rem;
}

.site-footer a {
  color: var(--light);
  opacity: 0.9;
}

.site-footer a:hover,
.site-footer a:focus {
  opacity: 1;
  color: var(--secondary);
}

.site-footer p {
  margin: 0;
}

/* Responsive navigation */
@media (max-width: 768px) {
  /*
    Mobile navigation
    - Collapses header links into a right-aligned dropdown.
    - The menu width hugs its content but never overflows the screen.
    - Auth links (Login / My Dashboard / Account / Logout) are styled
      like the rest of the menu items for consistent alignment.
  */
  .nav-toggle {
    display: block;
  }

  .main-nav {
    position: static;
  }

  .main-nav ul {
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    display: none;
    background-color: var(--primary);
    border-radius: 12px;
    box-shadow: 0 10px 24px var(--shadow);
    padding: 0.35rem;
    margin: 0.35rem 0 0;
    width: fit-content;
    max-width: calc(100vw - 1.25rem);
    z-index: 999;
  }

  .main-nav.open ul {
    display: flex;
  }

  .main-nav ul li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .main-nav ul li:last-child {
    border-bottom: none;
  }

  .main-nav ul a {
    display: block;
    padding: 0.85rem 1rem;
    white-space: nowrap;
  }

  /* Make auth buttons align like all other menu items on mobile */
  #dashboardLink,
  #accountLink,
  #logoutLink {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.85rem 1rem;
  }
}