/*
 * MB Painting NT website styles
 *
 * The design draws inspiration from high‑end painting websites with a modern,
 * clean aesthetic. A dark primary colour anchors the navigation and footer,
 * while warm golden accents reference the hues of the Northern Territory.
 */

/* Reset some defaults */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

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

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

/* Container provides consistent width and centering */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 160px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  font-weight: 500;
  color: #ffffff;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #eca400;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 200;
}

.menu-toggle .bar {
  height: 3px;
  width: 25px;
  background-color: #ffffff;
  margin: 4px 0;
  transition: all 0.3s ease;
}

/* Hero Section */
/*
 * Hero Section styles
 *
 * On all devices the hero should fill the viewport height so the Uluru
 * landscape is fully visible. We set a minimum height to ensure adequate
 * space on very short viewports and rely on `background-size: cover` to
 * maintain aspect ratio. This resolves issues where only part of the hero
 * image was visible on mobile screens. The `background-position` is set
 * to top center so the important elements of the photo appear within view
 * when the viewport is tall.
 */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background-image: url('uluru.jpg');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Overlay to darken the hero image for text legibility */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  color: #ffffff;
  max-width: 800px;
  padding: 1rem;
}

.hero-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta-btn {
  display: inline-block;
  background-color: #eca400;
  color: #112d4e;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-btn:hover {
  background-color: #f5b942;
  transform: translateY(-3px);
}

/* Sections */
.section {
  padding: 4rem 0;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-family: 'Montserrat', sans-serif;
  color: #112d4e;
}

/* About Section */
.about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about-text {
  flex: 1 1 55%;
}

.about-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #112d4e;
}

.about-text p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #444;
}

.about-image {
  flex: 1 1 40%;
}

.about-image img {
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

.service-card {
  background-color: #f7f9fc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-image {
  height: 160px;
  background-position: center;
  background-size: cover;
}

.service-card h3 {
  margin: 1rem;
  font-size: 1.4rem;
  color: #112d4e;
}

.service-card p {
  margin: 0 1rem 1.5rem;
  font-size: 0.95rem;
  color: #555;
}

/* Gallery Section */
.gallery-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Why Choose Us Section */
.why-section {
  background-color: #f7f9fc;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.why-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
}

.why-card:hover {
  transform: translateY(-4px);
}

.why-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #112d4e;
}

.why-card p {
  font-size: 0.95rem;
  color: #555;
}

/* Testimonials Section */
.testimonials-section {
  background-color: #ffffff;
}

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

.testimonial {
  background-color: #f7f9fc;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

.testimonial-text {
  font-style: italic;
  color: #444;
  margin-bottom: 0.75rem;
}

.testimonial-author {
  font-weight: 600;
  color: #112d4e;
}

/* Areas Section */
.areas-section {
  background-color: #f7f9fc;
}

.areas-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: 1rem;
}

.areas-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 1rem;
  color: #444;
}

.areas-list li::before {
  content: '\2022'; /* bullet */
  position: absolute;
  left: 0;
  color: #eca400;
  font-size: 1.2rem;
  top: 0;
}

/* Contact Section */
.contact-section {
  background-color: #fff;
}

.contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.contact-details {
  flex: 1 1 40%;
}

.contact-details p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #444;
}

.contact-info {
  list-style: none;
  font-size: 1rem;
  color: #444;
}

.contact-info li {
  margin-bottom: 0.5rem;
}

.contact-info a {
  color: #112d4e;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info a:hover {
  color: #eca400;
}

.contact-form {
  flex: 1 1 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.contact-form .full-width {
  grid-column: 1 / -1;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #112d4e;
}

.contact-form input,
.contact-form textarea {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.contact-form textarea {
  min-height: 120px;
}

.submit-btn {
  grid-column: 1 / -1;
  background-color: #112d4e;
  color: #ffffff;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #203c6b;
}

/* Footer */
.footer {
  background-color: #112d4e;
  color: #ffffff;
  text-align: center;
  padding: 1rem 0;
}

.footer-content {
  font-size: 0.9rem;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .hero-content h1 {
    font-size: 2.3rem;
  }
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .gallery-grid img {
    height: 180px;
  }
}

@media (max-width: 768px) {
  /* Fix the navigation bar to the top on small screens so it remains visible
     and does not overlap hero content. Assign a high z-index to ensure it
     sits above other elements and expand it across the full width. */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #112d4e;
    padding: 1rem 2rem;
    z-index: 1000;
  }
  .menu-toggle {
    display: flex;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background-color: rgba(17, 45, 78, 0.95);
    /* Position the dropdown just below the fixed navbar */
    position: fixed;
    top: 64px; /* approximate navbar height */
    left: 0;
    padding: 1rem 2rem;
    z-index: 999;
  }
  .nav-links.active {
    display: flex;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  /* On smaller screens offset the hero for the fixed navbar and ensure
     the hero image is fully visible. Setting the height to the viewport
     minus the nav height allows the Uluru landscape to remain in view
     without being hidden behind the menu. We avoid padding here so the
     hero content stays centred and overlays directly on top of the hero
     background. */
  .hero {
    height: calc(100vh - 64px);
    min-height: 500px;
    margin-top: 64px;
    /* Use `contain` so the entire image is visible on small screens. */
    background-size: contain;
    background-position: center top;
  }
  .about-container {
    flex-direction: column;
  }
  .contact-content {
    flex-direction: column;
  }
  .contact-form {
    grid-template-columns: 1fr;
  }
  .contact-form .full-width {
    grid-column: 1;
  }
  .service-card h3 {
    font-size: 1.2rem;
  }
  .service-card p {
    font-size: 0.9rem;
  }
  .gallery-grid img {
    height: 150px;
  }
  .logo {
    width: 140px;
  }
}

@media (max-width: 576px) {
  .nav-links {
    gap: 0.5rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .cta-btn {
    padding: 0.6rem 1.2rem;
  }
}