/* ========================
   GENERAL BODY + TEXT STYLING
   ======================== */
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #d1f5d3;
  color: #333;
}


/* ========================
   HEADER STYLING
   ======================== */
header {
  background: #4caf50;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
}

header h1 {
  margin: 0;
  font-size: 32px;
  font-family: 'Sugar Pie', cursive;
  font-style: italic;
}

header h1 span {
  display: inline-block;
  -webkit-text-stroke: 1px #caff05;
  text-stroke: 1px #caff05;
}

.that {
  color: #ff6105;
}

.mows {
  color: #0da84a;
}


/* ========================
   NAVIGATION MENU
   ======================== */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-right: 0;
  justify-content: center;
   padding: 0 100px; /* NEW — Fixes right-edge issue */
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}


nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}


/* ========================
   HERO SECTION
   ======================== */
.hero {
  display: flex;
  justify-content: space-between;
  padding: 32px;
  background: #f2fff2;
}

.services,
.middle-info,
.image-container {
  width: 33.33%;
  box-sizing: border-box;
  padding: 16px;
}

.services ul {
  list-style: none;
  padding-left: 0;
}

.services li {
  margin-bottom: 8px;
  font-size: 16px;
}

.services li a {
  color: #333;
  text-decoration: none;
}

.middle-info h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.middle-info p {
  font-size: 15px;
  line-height: 22px;
}

.image-container img {
  width: 100%;
  height: 585px;
  display: block;
}


/* ========================
   FOOTER
   ======================== */
footer {
  background-color: #4caf50;
  color: white;
  padding: 40px 20px;
  font-size: 14px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
}

.footer-column {
  flex: 1 1 300px;
  margin: 20px;
}

.footer-column h3 {
  font-family: 'Sugar Pie', cursive;
  font-size: 30px;
  margin-bottom: 10px;
  color: #99e265;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin: 6px 0;
}

.footer-column a {
  color: #f2f2f2;
  text-decoration: none;
}

.footer-column a:hover {
  text-decoration: underline;
  color: #99e265;
}


/* ========================
   AREAS WE SERVICE - SUBURB LIST
   ======================== */
.suburb-list {
  list-style: none;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}


/* ========================
   COPYRIGHT BAR
   ======================== */
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #444;
  padding-top: 20px;
  font-size: 13px;
}


/* ========================
   SERVICE & SUBURB PAGES LAYOUT
   (FIXED: MOVED OUT OF MEDIA QUERY FOR DESKTOP CENTERING)
   ======================== */

.service-page {
    /* FIX: Ensures desktop content is centered and contained */
    max-width: 1200px;
    margin: 0 auto;    
    padding: 40px 20px;
    background-color: #f8fff8;
    box-sizing: border-box; 
}

.service-page .hero-banner {
    background-color: #e6ffe6;
    padding: 30px; /* Consistent padding */
    border-left: 5px solid #4caf50;
    margin-bottom: 30px;
    border-radius: 4px;
}

/* Headings and Section Styles */
.content-section h2,
.suburb-page h2 {
    color: #0da84a; /* Deeper Mows Green for section headings */
    text-align: center;
    margin-bottom: 30px;
}

/* Service Grid / Value Props - Desktop Grid */
.service-grid,
.value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; 
    margin-top: 30px;
}

.service-item,
.prop-item {
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 8px; 
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    transition: transform 0.2s;
}

.service-item:hover,
.prop-item:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
}

.service-item h3,
.prop-item h3 {
    color: #4caf50;
    margin-top: 0;
    font-size: 1.4em;
}

/* NEW: Two-Column Layout for Suburb Specific Content */
.two-column-content {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Main content wider than sidebar */
    gap: 40px;
    margin-top: 40px;
    padding: 30px 0;
}

/* Map/Local Placeholder Styling */
.map-placeholder {
    margin-top: 25px;
    min-height: 280px; 
    width: 100%;
    background-color: #e0f2e0; 
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-style: italic;
    font-size: 1em;
    border-radius: 6px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* Final Call to Action */
.final-cta {
    text-align: center;
    padding: 50px 20px;
    background-color: #d1f5d3;
    margin-top: 40px;
    border-top: 5px solid #0da84a;
}

/* Button Styling for consistency (moved here from previous suggestion) */
.btn {
    display: inline-block;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.2s, transform 0.1s;
    text-align: center;
}

.btn-primary-cta {
    background-color: #ff6105;
    color: white;
}

.btn-primary-cta:hover {
    background-color: #e55700;
    transform: translateY(-1px);
}

/* ========================
   SUBURB PAGE SPECIFIC STYLES - MODIFIED FOR HERO IMAGE
   ======================== */

/* General Suburb Page Container - Ensure it uses the same desktop centering */
.suburb-page {
    /* Inherits max-width and margin: 0 auto from .service-page */
}

/* Suburb Hero Banner - Remove padding from outer container and set up flex context */
.suburb-hero {
    background-color: #f0fff0; /* Lighter shade of green for distinction */
    border-bottom: 3px solid #0da84a; /* Darker green line */
    padding: 0; /* Remove padding from outer container */
}

.suburb-hero h1 {
    font-size: 2.2em;
    color: #4caf50; /* Highlight the main heading */
}

/* New Flex Container for Text and Image */
.hero-inner-content {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 30px; /* Space between text and image */
}

/* Text Column (Takes up 60% of width on desktop) */
.hero-text-column {
    flex: 1 1 60%; /* Take up 60% of the space */
    padding: 30px; /* Add padding back inside the column */
    box-sizing: border-box;
}

/* Image Column (Takes up 40% of width on desktop) */
.hero-image-column {
    flex: 1 1 25%; /* Take up 40% of the space */
    align-self: stretch; /* Stretch to match the height of the other column */
    overflow: hidden;
}

.hero-image-column img {
    height: auto;
    max-height: 250px;
}



/* Local Coverage Section Styling */
/* ... (The rest of the existing styles for suburb-coverage, map-placeholder, etc., remain here) */


/* ========================
   RESPONSIVE STYLES (Inside the @media (max-width: 768px) block)
   ======================== */

@media (max-width: 768px) {
    /* ... existing mobile styles ... */

    /* Suburb Hero Stacking for Mobile */
    .hero-inner-content {
        flex-direction: column; /* Stack vertically */
    }

    .hero-text-column,
    .hero-image-column {
        flex: 1 1 100%;
        width: 100%;
        padding: 20px 0; /* Adjust padding for mobile stack */
    }
    
    .hero-image-column {
        order: -1; /* Place the image above the text on mobile */
    }
    
    .hero-image-column img {
        height: auto; /* Allow image height to be natural on mobile */
        max-height: 400px; /* Optional: cap height for mobile */
    }
    
    .suburb-hero {
        padding: 0; /* Ensure no extra padding outside the columns on mobile */
    }

    /* ... rest of the existing mobile styles ... */
}

/* ========================
   RESPONSIVE STYLES
   ======================== */

/* Mobile: stack footer columns and suburb list */
@media (max-width: 768px) {
  /* Stack hero content */
  .hero {
    flex-direction: column;
    align-items: center;
  }
  
  @media (max-width: 600px) {
    nav {
      flex-direction: column;
      margin-right: 0;
      align-items: flex-start;
    }
  }


  .services,
  .middle-info,
  .image-container {
    width: 100%;
    text-align: center;
  }

  /*
  --- OLD SERVICE PAGE STYLES WERE REMOVED FROM HERE ---
  (They are now correctly placed outside this media query)
  */

  /* NEW: Two-column content stacks on mobile */
  .two-column-content {
      grid-template-columns: 1fr; 
      gap: 20px;
  }

  /* Responsive image height */
  .image-container img {
    height: auto;
  }

  /* Responsive nav menu */
  nav {
    flex-direction: column;
    margin-right: 0;
    align-items: flex-start;
    gap: 8px;
  }

  /* Responsive header stacking */
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Footer responsiveness */
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-column {
    width: 100%;
  }

  .suburb-list {
    columns: 1;
  }
}

/* ==========================
   KEYWORD ACCORDION STYLES
   ========================== */

.keyword-accordion-header {
    background: #4caf50;
    color: white;
    padding: 12px 16px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.keyword-accordion-header:hover {
    background: #43a047;
}

.keyword-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9fff9;
    padding: 0 12px;
}

.keyword-accordion-body ul {
    padding: 12px 0;
}

/* ==========================
   FAQ ACCORDION STYLES
   ========================== */

.faq-item:hover .faq-question {
    color: #43a047;
}

.faq-question {
    cursor: pointer;
}

.faq-answer p {
    margin: 10px 0;
}