/*
Theme Name: FixaHome
Theme URI: https://example.com/fixahome
Author: FixaHome
Author URI: https://example.com
Description: A clean and modern WordPress theme for handyman and home maintenance businesses. Designed specifically for the FixaHome service with clearly defined sections for your hero banner, features, services, process and about information.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fixahome
Tags: custom-background, custom-logo, custom-menu, featured-images, flexible-header, translation-ready
*/

/* CSS reset & base styles */
:root {
  --primary-color: #193B6E; /* deep navy */
  --secondary-color: #EF7B18; /* warm orange */
  --light-color: #F8F9FA; /* very light gray */
  --text-color: #333333; /* dark text for readability */
  --max-width: 1200px;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background: #fff;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* Utility classes */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header styles */
header {
  background: var(--primary-color);
  color: #fff;
  padding: 20px 0;
  position: relative;
  z-index: 100;
}
header .logo img {
  height: 60px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}
nav ul li a {
  color: #ffffff;
  font-weight: 600;
  transition: color .2s ease;
}
nav ul li a:hover {
  color: var(--secondary-color);
}

/* Hero section */
.hero {
  background: var(--light-color);
  text-align: center;
  padding: 100px 20px 80px;
}
.hero h1 {
  color: var(--primary-color);
  font-size: 2.8rem;
  margin-bottom: 20px;
}
.hero p {
  font-size: 1.2rem;
  color: var(--text-color);
  max-width: 800px;
  margin: 0 auto 30px;
}
.hero .button {
  display: inline-block;
  background: var(--secondary-color);
  color: #fff;
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 600;
  transition: background .3s ease;
}
.hero .button:hover {
  background: #e76d0e;
}

/* Features section */
.features {
  background: #ffffff;
  padding: 60px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.feature-item {
  flex: 0 0 45%;
  max-width: 45%;
  margin-bottom: 40px;
  text-align: center;
}
.feature-item i {
  font-size: 3rem;
  color: var(--secondary-color);
  margin-bottom: 10px;
}
.feature-item h3 {
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-bottom: 10px;
}
.feature-item p {
  font-size: 1rem;
  color: var(--text-color);
}

/* Services section */
.services {
  background: var(--light-color);
  padding: 60px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.service-card {
  flex: 0 0 45%;
  max-width: 45%;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.service-card i {
  font-size: 2.5rem;
  color: var(--secondary-color);
  margin-bottom: 10px;
}
.service-card h3 {
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-bottom: 10px;
}
.service-card ul {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}
.service-card ul li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 16px;
  font-size: 0.95rem;
  color: var(--text-color);
}
.service-card ul li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--secondary-color);
}

/* Process section */
.process {
  background: #ffffff;
  padding: 60px 20px;
}
.process-title {
  text-align: center;
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 40px;
}
.process-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.process-step {
  flex: 0 0 22%;
  max-width: 22%;
  text-align: center;
  margin-bottom: 30px;
}
.process-step i {
  font-size: 2.5rem;
  color: var(--secondary-color);
  margin-bottom: 10px;
}
.process-step h4 {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 10px;
}
.process-step p {
  font-size: 0.95rem;
  color: var(--text-color);
}

/* About section */
.about {
  background: var(--light-color);
  padding: 60px 20px;
  text-align: center;
}
.about h2 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 20px;
}
.about p {
  font-size: 1.1rem;
  color: var(--text-color);
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto;
}

/* Footer styles */
footer {
  background: var(--primary-color);
  color: #ffffff;
  padding: 40px 20px;
  text-align: center;
}
footer p {
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .feature-item, .service-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .process-step {
    flex: 0 0 45%;
    max-width: 45%;
  }
}