/*
Theme Name:   Precision Punchout Child
Theme URI:    https://ppr.solutions
Author:       Ryan Walton
Author URI:   https://ppr.solutions
Description:  Child theme for Precision Punchout & Repair LLC — Coastal design for Walton County, FL handyman business. Requires the Kadence theme as parent.
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  precision-punchout-child
Tags:         coastal, handyman, local-business, walton-county
*/

/* ============================================================
   PRECISION PUNCHOUT & REPAIR — CUSTOM STYLES
   Built for Kadence theme · Walton County, FL
   ============================================================ */

/* ── 1. CSS Variables (Coastal Color Palette) ── */
:root {
  --color-primary:   #1B6CA8;   /* Deep coastal blue       */
  --color-secondary: #2EAC7D;   /* Emerald Gulf teal       */
  --color-accent:    #C4A265;   /* Warm driftwood sand     */
  --color-dark:      #1C2B3A;   /* Deep coastal navy       */
  --color-light:     #EEF7FF;   /* Soft Alice blue         */
  --color-sand:      #F7F3EE;   /* Beach sand background   */
  --color-text:      #2D3748;   /* Body text               */
  --color-muted:     #718096;   /* Muted / secondary text  */
  --color-border:    #E2E8F0;   /* Subtle border           */
  --color-white:     #FFFFFF;
  --radius-card:     12px;
  --shadow-card:     0 2px 16px rgba(0,0,0,0.06);
  --shadow-hover:    0 12px 32px rgba(0,0,0,0.12);
  --transition:      all 0.25s ease;
}

/* ── 2. Base Typography ── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p { line-height: 1.75; }

/* ── 3. Site Header ── */
.site-header,
#masthead,
.kadence-sticky-header {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
  background: #ffffff !important;
}

/* Logo text */
.site-title,
.site-title a {
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: var(--color-dark) !important;
  letter-spacing: -0.01em;
}

/* Nav links */
.primary-navigation a,
.kadence-navigation a {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
  transition: color 0.2s;
}
.primary-navigation a:hover,
.kadence-navigation a:hover { color: var(--color-primary); }

/* ── 4. Buttons ── */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  letter-spacing: 0.01em !important;
  transition: var(--transition) !important;
  border-width: 2px !important;
}

/* Primary (filled) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(46,172,125,0.3) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: #25916a !important;
  border-color: #25916a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(46,172,125,0.4) !important;
}

/* Outline (on dark backgrounds) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Outline on light backgrounds */
.ppr-light-outline .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.ppr-light-outline .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-light) !important;
}

/* ── 5. Hero / Cover Block ── */
.wp-block-cover {
  min-height: 85vh;
}
.wp-block-cover .wp-block-cover__inner-container {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ── 6. Section Spacing ── */
.wp-block-group {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Tighter spacing for utility sections */
.ppr-tight { padding-top: 24px !important; padding-bottom: 24px !important; }
.ppr-medium { padding-top: 56px !important; padding-bottom: 56px !important; }

/* ── 7. Eyebrow Text ── */
.ppr-eyebrow {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-secondary) !important;
  display: block;
  margin-bottom: 12px;
}

/* ── 8. Trust Bar ── */
.ppr-trust-bar {
  background: var(--color-light) !important;
  border-bottom: 1px solid rgba(27,108,168,0.12) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.ppr-trust-bar .wp-block-columns {
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 1100px;
  margin: 0 auto;
}
.ppr-trust-bar .wp-block-column {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-dark) !important;
  text-align: center;
}
.ppr-trust-bar .wp-block-column p { margin: 0 !important; }

/* ── 9. Service Cards ── */
.ppr-service-card {
  background: #ffffff !important;
  border-radius: var(--radius-card) !important;
  padding: 32px 28px !important;
  box-shadow: var(--shadow-card) !important;
  border-top: 4px solid var(--color-primary) !important;
  transition: var(--transition) !important;
  height: 100%;
}
.ppr-service-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-hover) !important;
}
.ppr-service-card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
  margin-bottom: 10px !important;
}
.ppr-service-card p {
  color: var(--color-muted) !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
}
.ppr-service-card a {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
.ppr-service-card a:hover { color: var(--color-secondary) !important; }

/* Services grid background */
.ppr-services-section {
  background-color: var(--color-sand) !important;
}

/* ── 10. About Section ── */
.ppr-about-section .wp-block-image img {
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.ppr-about-badge {
  background: var(--color-secondary);
  color: white;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(46,172,125,0.3);
}
.ppr-about-badge .num { font-size: 2rem; font-weight: 800; display: block; line-height: 1; }
.ppr-about-badge .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; opacity: 0.9; }

/* Checklist items */
.ppr-checklist { list-style: none !important; padding-left: 0 !important; }
.ppr-checklist li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}
.ppr-checklist li::before {
  content: '✓' !important;
  min-width: 22px !important;
  height: 22px !important;
  background: #E0F4EC !important;
  color: var(--color-secondary) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ── 11. Testimonial Cards ── */
.ppr-testimonial {
  background: #ffffff !important;
  border-radius: var(--radius-card) !important;
  padding: 28px !important;
  box-shadow: var(--shadow-card) !important;
  height: 100%;
}
.ppr-testimonial .stars { color: #F6AD55; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.ppr-testimonial .quote { font-style: italic; line-height: 1.7; margin-bottom: 18px; font-size: 0.95rem; }
.ppr-testimonial .reviewer { font-weight: 700; font-size: 0.9rem; color: var(--color-dark); }
.ppr-testimonial .location { font-size: 0.8rem; color: var(--color-muted); }
.ppr-testimonials-bg { background: var(--color-light) !important; }

/* ── 12. Booking CTA Section ── */
.ppr-booking-section {
  background: linear-gradient(135deg, var(--color-dark) 0%, #2a4a6a 100%) !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}
.ppr-booking-section h2 { color: #ffffff !important; }
.ppr-booking-section p { color: rgba(255,255,255,0.75) !important; font-size: 1.05rem !important; }
.ppr-booking-section .ppr-eyebrow { color: #7ecfb0 !important; }

/* ── 13. Services Page Hero ── */
.ppr-page-hero {
  background: linear-gradient(160deg, #0d2f47 0%, #1B6CA8 100%) !important;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
  text-align: center !important;
}
.ppr-page-hero h1 { color: #ffffff !important; }
.ppr-page-hero p { color: rgba(255,255,255,0.8) !important; font-size: 1.1rem !important; }

/* Service detail cards */
.ppr-service-detail {
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 28px !important;
}
.ppr-service-detail-sidebar {
  background: linear-gradient(160deg, var(--color-primary), #134f7d) !important;
  padding: 40px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: white !important;
}
.ppr-service-detail-sidebar h3 { color: white !important; font-size: 1.15rem !important; }
.ppr-service-detail-sidebar p { color: rgba(255,255,255,0.75) !important; font-size: 0.82rem !important; }

/* ── 14. Service Area ── */
.ppr-service-area {
  background: var(--color-dark) !important;
  text-align: center !important;
}
.ppr-service-area h2 { color: #ffffff !important; }
.ppr-service-area p { color: rgba(255,255,255,0.7) !important; }
.ppr-area-tag {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 50px !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin: 4px !important;
}

/* ── 15. Wave SVG Separator ── */
.ppr-wave-bottom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 70px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,35 C240,70 480,0 720,35 C960,70 1200,0 1440,35 L1440,70 L0,70 Z' fill='%23f9f9f9'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  pointer-events: none;
}

/* ── 16. Gallery Page ── */
.ppr-gallery-grid .wp-block-image img {
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.ppr-gallery-grid .wp-block-image img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-hover);
}

/* ── 17. Contact / Booking Page ── */
.ppr-contact-info-card {
  background: var(--color-light) !important;
  border-radius: var(--radius-card) !important;
  padding: 32px !important;
  border-left: 4px solid var(--color-primary) !important;
}
.ppr-contact-info-card h3 { color: var(--color-primary) !important; margin-bottom: 16px !important; }
.ppr-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  font-size: 0.95rem !important;
}

/* ── 18. Footer ── */
.site-footer,
#colophon {
  background: var(--color-dark) !important;
  color: rgba(255,255,255,0.7) !important;
}
.site-footer a,
#colophon a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.site-footer a:hover,
#colophon a:hover { color: var(--color-secondary) !important; }
.site-footer .widget-title,
#colophon h4 {
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ── 19. Mobile Responsive ── */
@media (max-width: 768px) {
  .wp-block-cover { min-height: 75vh !important; }

  .wp-block-group {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.2rem !important; }

  .ppr-trust-bar .wp-block-columns {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
  .wp-block-button a { width: 100% !important; text-align: center !important; }

  .ppr-service-detail .wp-block-columns {
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem !important; }
}

/* ── 20. Simply Schedule Appointments embed styling ── */
.ssa-booking-container,
.ssa-booking-form {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
}