/*
Theme Name: Perfect Services
Theme URI: https://perfectservices.com.au
Author: Perfect Services
Author URI: https://perfectservices.com.au
Description: A modern, professional WordPress theme for Perfect Services - Adelaide's leading cleaning company. Features a clean layout with hero section, services showcase, pricing plans, team profiles, and testimonials.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: perfect-services
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template, theme-options, cleaning-services
*/

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --ps-primary: #6B4E9E;
  --ps-primary-dark: #4A3570;
  --ps-secondary: #5B9BD5;
  --ps-accent: #E8E0F0;
  --ps-text: #2C3E50;
  --ps-text-light: #6C757D;
  --ps-white: #FFFFFF;
  --ps-light-bg: #F8F9FA;
  --ps-border: #E9ECEF;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ps-text);
  background: var(--ps-white);
}

a {
  color: var(--ps-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

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

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

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

/* Body text: p +2px, ul/li/p same color */
p {
  font-size: calc(1em + 2px);
}

ul, li, p {
  color: var(--ps-text, #1e293b);
}

/* ============================================
   Buttons
   ============================================ */
.ps-btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.ps-btn-primary {
  background: var(--ps-primary);
  color: var(--ps-white);
  border-color: var(--ps-primary);
}

.ps-btn-primary:hover {
  background: var(--ps-primary-dark);
  border-color: var(--ps-primary-dark);
  color: var(--ps-white);
}

.ps-btn-outline {
  background: transparent;
  color: var(--ps-primary);
  border-color: var(--ps-primary);
}

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

.ps-btn-dark {
  background: var(--ps-primary-dark);
  color: var(--ps-white);
  border-color: var(--ps-primary-dark);
}

/* ============================================
   Container
   ============================================ */
.ps-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================
   Section Styling
   ============================================ */
.ps-section {
  padding: 80px 0;
}

.ps-section-title {
  text-align: center;
  margin-bottom: 50px;
}

.ps-section-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ps-primary);
  margin-bottom: 10px;
}

.ps-section-heading {
  font-size: 2rem;
  color: var(--ps-text);
  margin: 0;
}