/*
Theme Name: Duct Wizards
Theme URI: https://ductwizards.ca
Author: Duct Wizards
Author URI: https://ductwizards.ca
Description: Professional WordPress theme for Duct Wizards - NADCA Certified Air Duct Cleaning & HVAC Services in Alberta. Modern, clean design optimized for lead generation with prominent CTAs, trust signals, and service showcases. Includes custom header, hero, services, pricing, testimonials sections tailored for duct cleaning businesses.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duct-wizards
Tags: custom-theme, duct-cleaning, hvac, service-business, lead-generation, responsive, one-page
*/

/* Basic resets and variables */
:root {
  --primary: #0F2744;
  --primary-dark: #0A1F35;
  --accent: #1E88E5;
  --accent-dark: #1565C0;
  --success: #059669;
  --warning: #D97706;
  --light-bg: #F8FAFC;
  --card-bg: #FFFFFF;
  --text-dark: #1E293B;
  --text-muted: #64748B;
  --border: #E2E8F0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-dark);
}

/* Utility classes for Tailwind-like styling */
.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--accent);
  color: white;
  box-shadow: 0 4px 6px -1px rgb(30 136 229 / 0.2), 0 2px 4px -2px rgb(30 136 229 / 0.2);
}

.btn-primary:hover {
  background-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(30 136 229 / 0.3), 0 4px 6px -4px rgb(30 136 229 / 0.3);
}

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

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

.btn-cta {
  background-color: #059669;
  color: white;
  font-size: 1.05rem;
  padding: 0.85rem 2rem;
  box-shadow: 0 10px 15px -3px rgb(5 150 105 / 0.3);
}

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

.section {
  padding: 5rem 0;
}

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

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 3rem;
  font-size: 1.1rem;
}

/* Header */
.site-header {
  background-color: white;
  box-shadow: 0 1px 0 0 var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo img {
  height: 56px;
  width: auto;
  max-width: 220px;
}

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

.main-nav a {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.main-nav a:hover {
  color: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--primary);
  font-size: 1.05rem;
}

.phone-header svg {
  width: 20px;
  height: 20px;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, #0F2744 0%, #1E3A5F 100%);
  color: white;
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cdefs%3E%3Cpattern id=%22grid%22 width=%2230%22 height=%2230%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22M 30 0 L 0 0 0 30%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22008%22 stroke-width=%221%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22200%22 height=%22200%22 fill=%22url(%23grid)%22/%3E%3C/svg%3E') repeat;
  opacity: 0.06;
}

.hero-content {
  max-width: 680px;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 3.25rem;
  line-height: 1.1;
  color: white;
  margin-bottom: 1.25rem;
  font-weight: 800;
}

.hero p {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  max-width: 560px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.badge {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Trust Bar */
.trust-bar {
  background-color: var(--light-bg);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.trust-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.trust-item svg {
  color: var(--success);
  width: 22px;
  height: 22px;
}

/* Services */
.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  border-color: var(--accent);
}

.service-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0F2744, #1E3A5F);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.service-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

.service-card p {
  color: var(--text-muted);
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.service-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--success);
  margin-bottom: 1rem;
}

/* Pricing */
.pricing-card {
  background: white;
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  position: relative;
  transition: transform 0.3s ease;
}

.pricing-card.popular {
  border-color: var(--accent);
  box-shadow: 0 25px 50px -12px rgb(30 136 229 / 0.15);
  transform: scale(1.03);
}

.pricing-card.popular::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 1.25rem;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.price {
  font-size: 3.25rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Testimonials */
.testimonial {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
}

.stars {
  color: #F59E0B;
  margin-bottom: 1rem;
}

/* FAQ */
.faq-question {
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.faq-answer {
  padding-bottom: 1.25rem;
  color: var(--text-muted);
  display: none;
}

.faq-question.active + .faq-answer {
  display: block;
}

/* Footer */
.site-footer {
  background: var(--primary);
  color: rgba(255,255,255,0.85);
  padding: 4rem 0 2rem;
}

.site-footer h4 {
  color: white;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
}

.site-footer a {
  color: rgba(255,255,255,0.75);
}

.site-footer a:hover {
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .main-nav {
    display: none;
  }
  
  .hero h1 {
    font-size: 2.4rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
}