/*
Theme Name: Aesthetic Abodes
Theme URI: https://aestheticabodes.example.com
Author: Aesthetic Abodes
Author URI: https://aestheticabodes.example.com
Description: A custom WordPress theme for Aesthetic Abodes cleaning business.  
This theme was handcrafted to reflect the sleek, minimal and modern aesthetic requested.  
It features a striking hero banner, a simple navigation system with rectangular buttons,  
customised page templates for services, gallery, testimonials, quotes and bookings,  
and built‑in JavaScript to estimate quotes and handle booking submissions.  
Version: 1.0
License: GPL2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aesthetic-abodes
*/

/*
--------------------------------------------------------------------
 Colour palette
  - Crisp sky blue:    used for highlights and call‑to‑action buttons
  - Blue grey:         used for primary elements like the navigation buttons
  - Green grey:        used for hover states
  - Cream:             used as the primary background to keep the site light and airy
  - Black:             used sparingly for text contrast
  The colours are defined as CSS variables so they can be reused easily throughout the theme.
--------------------------------------------------------------------
*/

:root {
  --color-sky-blue: #AEE0FF;
  --color-blue-grey: #6F8BA4;
  --color-green-grey: #A7C7C7;
  --color-cream: #F7F6EF;
  --color-black: #333333;
}

/*
--------------------------------------------------------------------
 Base styles
  Sets up the global typography, background and default element spacing.  
  Uses a clean sans‑serif font (Montserrat) imported in functions.php.
--------------------------------------------------------------------
*/
body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--color-cream);
  color: var(--color-black);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--color-blue-grey);
}

a {
  color: var(--color-blue-grey);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover, a:focus {
  color: var(--color-green-grey);
}

/* Container class to centre content and provide consistent padding */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/*
--------------------------------------------------------------------
 Header and navigation styles
  The front page displays the navigation beneath the hero image.  
  Other pages show it at the very top.  
  The navigation uses rectangular buttons with rounded corners and a solid background.
--------------------------------------------------------------------
*/
.navbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 0;
  background-color: var(--color-cream);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.navbar li {
  margin: 0;
  padding: 0;
}

.navbar a {
  display: inline-block;
  padding: 10px 18px;
  background-color: var(--color-blue-grey);
  color: var(--color-cream);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar a:hover,
.navbar a:focus {
  background-color: var(--color-green-grey);
  color: var(--color-black);
}

/*
--------------------------------------------------------------------
 Hero section
  Used on the front page to display the Calgary skyline.  
  The text overlay is centred horizontally and anchored to the bottom of the image.
--------------------------------------------------------------------
*/
.hero {
  position: relative;
  width: 100%;
}

.hero img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}

.hero-text {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--color-blue-grey);
  background-color: rgba(247, 246, 239, 0.8);
  padding: 20px 30px;
  border-radius: 8px;
}

.hero-text h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 600;
}

.hero-text p {
  margin: 10px 0 0 0;
  font-size: 20px;
  font-weight: 300;
}

/*
--------------------------------------------------------------------
 Page headers
  Provide a consistent look for interior pages, showing the page title.
--------------------------------------------------------------------
*/
.page-header {
  background-color: var(--color-blue-grey);
  padding: 60px 0;
  text-align: center;
}

.page-header h1 {
  color: var(--color-cream);
  margin: 0;
  font-size: 42px;
  font-weight: 600;
}

/*
--------------------------------------------------------------------
 Services section
  Displays service offerings in flexible cards.  
  The cards adjust to the available width and wrap on smaller screens.
--------------------------------------------------------------------
*/
.services-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
}

.service-box {
  background-color: var(--color-blue-grey);
  color: var(--color-cream);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 1 1 280px;
  max-width: 320px;
}

.service-box h3 {
  margin-top: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-cream);
}

.service-box p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 300;
}

/*
--------------------------------------------------------------------
 Testimonials
  Styles for the testimonials list on the testimonials page.
--------------------------------------------------------------------
*/
.testimonial-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.testimonial {
  background-color: var(--color-blue-grey);
  color: var(--color-cream);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.testimonial strong {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  color: var(--color-cream);
}

/*
--------------------------------------------------------------------
 Forms (quote and booking)
  Provides a clean layout for form fields and buttons.  
  Inputs stretch to the full width of their container.
--------------------------------------------------------------------
*/
.form-container {
  max-width: 800px;
  margin: 40px auto;
  background-color: var(--color-cream);
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: var(--color-blue-grey);
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-blue-grey);
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-black);
  background-color: #fff;
  box-sizing: border-box;
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.button {
  display: inline-block;
  background-color: var(--color-blue-grey);
  color: var(--color-cream);
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

.button:hover {
  background-color: var(--color-green-grey);
  color: var(--color-black);
}

/*
--------------------------------------------------------------------
 Chat button
  A floating button that links to the owner's phone number for quick questions via SMS.  
  It appears fixed at the bottom right of the screen.
--------------------------------------------------------------------
*/
.chat-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: var(--color-blue-grey);
  color: var(--color-cream);
  padding: 14px 18px;
  border-radius: 50px;
  text-align: center;
  font-size: 16px;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.chat-button:hover {
  background-color: var(--color-green-grey);
  color: var(--color-black);
}

/*
--------------------------------------------------------------------
 Responsive adjustments
  Ensures the layout remains usable on smaller screens.  
  Adjusts font sizes and card widths as the viewport shrinks.
--------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .hero img {
    height: 300px;
  }
  .hero-text h1 {
    font-size: 32px;
  }
  .hero-text p {
    font-size: 16px;
  }
  .service-box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}