/*
Theme Name: Sedcon Plumbing
Theme URI: https://sedconplumbing.com.au
Author: Sedcon Plumbing
Description: Sedcon Plumbing — Melbourne plumbing for property managers, strata, and builders.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: sedcon
*/

:root {
  --blue: #2E4A6B;
  --copper: #B5622A;
  --charcoal: #2D2D2D;
  --light-grey: #F2F4F6;
  --off-white: #F7F7F5;
  --border: #e0e0e0;
  --text-mid: #555;
  --text-light: #888;
}

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

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--charcoal); background: #fff; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.sp-nav { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.sp-logo { font-size: 17px; font-weight: 600; letter-spacing: 1.5px; color: var(--charcoal); text-transform: uppercase; }
.sp-logo span { color: var(--copper); }
.sp-nav-btn { background: var(--blue); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }

.sp-hero { background: var(--light-grey); padding: 64px 24px 56px; }
.sp-hero-inner { max-width: 720px; margin: 0 auto; }
.sp-hero h1 { font-size: clamp(26px, 5vw, 42px); font-weight: 600; color: var(--charcoal); line-height: 1.25; margin-bottom: 16px; }
.sp-hero h1 .hl { color: var(--blue); }
.sp-hero p { font-size: 17px; color: var(--text-mid); margin-bottom: 32px; max-width: 520px; }
.sp-btn-primary { display: inline-block; background: var(--blue); color: #fff; padding: 14px 32px; border-radius: 8px; font-size: 16px; font-weight: 500; margin-bottom: 28px; }
.sp-trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-trust-pill { background: #fff; border: 1px solid var(--border); color: var(--charcoal); font-size: 13px; padding: 6px 14px; border-radius: 99px; display: flex; align-items: center; gap: 7px; }
.sp-trust-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--copper); flex-shrink: 0; }

.sp-section { padding: 60px 24px; background: #fff; }
.sp-section-alt { padding: 60px 24px; background: var(--off-white); }
.sp-inner { max-width: 800px; margin: 0 auto; }
.sp-section h2, .sp-section-alt h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.sp-sub { color: var(--text-mid); font-size: 16px; margin-bottom: 36px; }

.sp-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.sp-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.sp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }

.sp-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.sp-card-blue { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 12px; padding: 24px; }
.sp-card-icon { font-size: 22px; color: var(--blue); margin-bottom: 12px; }
.sp-card h3 { font-size: 15px; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.sp-card-blue h3 { font-size: 15px; font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.sp-card p, .sp-card-blue p { font-size: 14px; color: var(--text-mid); line-height: 1.65; }

.sp-icp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.sp-icp-card { display: block; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--blue); border-radius: 12px; padding: 28px 24px; transition: box-shadow 0.2s; }
.sp-icp-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.sp-icp-card .sp-card-icon { margin-bottom: 14px; }
.sp-icp-card h3 { font-size: 17px; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.sp-icp-card p { font-size: 14px; color: var(--text-mid); }
.sp-icp-arrow { color: var(--blue); font-size: 13px; font-weight: 500; margin-top: 16px; display: flex; align-items: center; gap: 4px; }

.sp-steps { display: flex; flex-direction: column; gap: 24px; }
.sp-step { display: flex; gap: 20px; align-items: flex-start; }
.sp-step-num { width: 38px; height: 38px; min-width: 38px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.sp-step h3, .sp-step-content h3 { font-size: 16px; font-weight: 600; color: var(--charcoal); margin-bottom: 4px; }
.sp-step p, .sp-step-content p { font-size: 14px; color: var(--text-mid); line-height: 1.65; }

.sp-testimonial { background: var(--blue); padding: 56px 24px; }
.sp-testimonial blockquote { max-width: 680px; margin: 0 auto; color: #fff; font-size: 18px; line-height: 1.75; font-style: italic; border-left: 3px solid var(--copper); padding-left: 24px; margin-bottom: 16px; }
.sp-testimonial cite { color: rgba(255,255,255,0.6); font-size: 14px; font-style: normal; display: block; max-width: 680px; margin: 0 auto; padding-left: 27px; }

.sp-creds { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.sp-cred { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 18px; font-size: 13px; color: var(--charcoal); display: flex; align-items: center; gap: 8px; }
.sp-cred i { color: var(--blue); font-size: 16px; }

.sp-faq { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sp-faq-item { border-bottom: 1px solid var(--border); padding: 20px 24px; }
.sp-faq-item:last-child { border-bottom: none; }
.sp-faq-item h3 { font-size: 15px; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.sp-faq-item p { font-size: 14px; color: var(--text-mid); line-height: 1.65; }
.sp-faq-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 24px; }
.sp-faq-list .sp-faq-item { border-bottom: 1px solid var(--border); padding: 20px 24px; }
.sp-faq-list .sp-faq-item:last-child { border-bottom: none; }

.sp-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sp-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--charcoal); }
.sp-list li i { color: var(--copper); margin-top: 2px; flex-shrink: 0; }

.sp-cta-bottom { background: var(--blue); padding: 64px 24px; text-align: center; }
.sp-cta-bottom h2 { color: #fff; font-size: clamp(20px, 3vw, 28px); font-weight: 600; margin-bottom: 12px; }
.sp-cta-bottom p { color: rgba(255,255,255,0.75); font-size: 16px; margin-bottom: 28px; }
.sp-btn-white { display: inline-block; background: #fff; color: var(--blue); padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: 600; }
.sp-cta-email { color: rgba(255,255,255,0.75); font-size: 14px; margin-top: 14px; }
.sp-cta-email a { color: #fff; text-decoration: underline; }

.sp-footer { background: var(--charcoal); padding: 48px 24px 32px; color: rgba(255,255,255,0.7); }
.sp-footer-inner { max-width: 800px; margin: 0 auto; }
.sp-footer-logo { font-size: 16px; font-weight: 600; letter-spacing: 1.5px; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
.sp-footer-logo span { color: var(--copper); }
.sp-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; font-size: 14px; }
.sp-footer-links a { color: rgba(255,255,255,0.6); }
.sp-footer-links a:hover { color: #fff; }
.sp-footer-details { font-size: 13px; line-height: 1.9; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 20px; }
.sp-footer-details a { color: rgba(255,255,255,0.6); }
.sp-suburbs { font-size: 14px; color: var(--text-mid); line-height: 1.9; }

.sp-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.sp-feature-card { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 12px; padding: 24px; }
.sp-feature-icon { font-size: 22px; color: var(--blue); margin-bottom: 12px; }
.sp-feature-card h3 { font-size: 15px; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.sp-feature-card p { font-size: 14px; color: var(--text-mid); line-height: 1.65; }

.sp-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 8px; }
.sp-service-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--charcoal); padding: 6px 0; }
.sp-service-item i { color: var(--copper); margin-top: 2px; flex-shrink: 0; }

.sp-credentials { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.sp-cred-block h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 600; color: var(--blue); margin-bottom: 12px; }
.sp-cred-block p { font-size: 15px; color: var(--text-mid); line-height: 1.7; }
.sp-cred-stats { display: flex; flex-direction: column; gap: 16px; }
.sp-stat { text-align: center; }
.sp-stat-num { display: block; font-size: 22px; font-weight: 700; color: var(--blue); }
.sp-stat-label { display: block; font-size: 12px; color: var(--text-mid); margin-top: 2px; }

.sp-hl, .hl { color: var(--blue); }

@media (max-width: 600px) {
  .sp-nav { padding: 0 16px; }
  .sp-hero { padding: 44px 16px 40px; }
  .sp-btn-primary, .sp-btn-white { display: block; text-align: center; }
  .sp-section, .sp-section-alt { padding: 44px 16px; }
  .sp-cta-bottom { padding: 48px 16px; }
  .sp-credentials { grid-template-columns: 1fr; }
  .sp-cred-stats { flex-direction: row; justify-content: space-around; }
  .sp-feature-grid, .sp-services-grid { grid-template-columns: 1fr; }
}