/*
 Theme Name:   Car Wreck Doctor
 Theme URI:    https://carwreckdoctor.com
 Description:  Custom child theme for Car Wreck Doctor - accident medical & legal referral
 Author:       Donovan Digital Solutions
 Author URI:   https://donovandigitalsolutions.com
 Template:     generatepress
 Version:      1.1.0
 License:      Private
 Text Domain:  carwreckdoctor
*/

/* ============================================================================
   BRAND VARIABLES — Matched to live carwreckdoctor.com (April 2026)
   ============================================================================ */
:root {
  /* Primary green (CTA buttons, accents) */
  --cwd-green: #3FBE7F;
  --cwd-green-hover: #35a56e;
  --cwd-green-light: #E8F5E9;

  /* Purple accent (callout boxes) */
  --cwd-purple: #572684;
  --cwd-purple-light: #6b3a9a;

  /* Neutrals */
  --cwd-dark: #222222;
  --cwd-text: #222222;
  --cwd-gray: #333333;
  --cwd-gray-light: #616161;
  --cwd-light: #FAFAFA;
  --cwd-white: #FFFFFF;
  --cwd-black: #000000;
  --cwd-border: #E0E0E0;

  /* Layout */
  --cwd-container: 1200px;
  --cwd-shadow: 0 2px 12px rgba(0,0,0,0.08);
  --cwd-transition: 0.3s ease;
}

/* ============================================================================
   GLOBAL STYLES — Poppins font, 18px base
   ============================================================================ */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--cwd-text);
  font-size: 18px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  color: var(--cwd-dark);
  line-height: 1.2;
}

h1 { font-size: 36px; }
h2 { font-size: 38px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }

a {
  color: var(--cwd-dark);
  text-decoration: none;
  transition: color var(--cwd-transition);
}
a:hover { color: var(--cwd-green); }

p {
  font-size: 18px;
  line-height: 32px;
  margin-bottom: 16px;
}

.grid-container {
  max-width: var(--cwd-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================================
   TOP PHONE BAR — Dark bar with phone CTA (like live site)
   ============================================================================ */
.cwd-top-bar {
  background: var(--cwd-green);
  color: var(--cwd-white);
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
}
.cwd-top-bar a {
  color: var(--cwd-white);
  font-weight: 600;
  text-decoration: none;
}
.cwd-top-bar a:hover {
  color: var(--cwd-dark);
}
.cwd-top-bar .close-bar {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cwd-white);
  cursor: pointer;
  font-size: 20px;
  background: none;
  border: none;
  padding: 0 4px;
}
.cwd-top-bar .grid-container {
  position: relative;
}

/* ============================================================================
   HEADER — White bg, fixed position (matches live site)
   ============================================================================ */
.site-header {
  background: var(--cwd-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: none;
  border-bottom: 1px solid var(--cwd-border);
  transition: box-shadow var(--cwd-transition);
}
.site-header.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Logo in header */
.site-header .site-logo img,
.site-header .cwd-logo img {
  max-height: 80px;
  width: auto;
}
.cwd-logo {
  display: flex;
  align-items: center;
}
.cwd-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.cwd-logo img {
  height: 70px;
  width: auto;
}

/* Navigation — Poppins 700, 16px, normal case, dark text */
.main-navigation a {
  color: var(--cwd-dark) !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
  padding: 12px 16px;
  transition: color var(--cwd-transition);
}
.main-navigation a:hover {
  color: var(--cwd-green) !important;
}

/* Green "Free Consultation" CTA in header */
.header-cta,
.cwd-btn-green {
  background: var(--cwd-green);
  color: var(--cwd-white) !important;
  padding: 12px 20px !important;
  border-radius: 0;
  font-weight: 700 !important;
  font-size: 16px;
  transition: background var(--cwd-transition);
  text-decoration: none;
  display: inline-block;
}
.header-cta:hover,
.cwd-btn-green:hover {
  background: var(--cwd-green-hover);
  color: var(--cwd-white) !important;
}

/* Header phone number */
.header-phone {
  color: var(--cwd-gray);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

/* ============================================================================
   HERO SECTION (City + State Pages) — Matches live site dark hero
   ============================================================================ */
/* Homepage hero — white bg, dark text, split layout (matches original site) */
.cwd-hero {
  background: var(--cwd-white);
  color: var(--cwd-dark);
  padding: 60px 0;
}
.cwd-hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.cwd-hero h1 {
  color: var(--cwd-dark);
  font-size: 44px;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
}
.cwd-hero h2 {
  color: var(--cwd-dark);
  font-size: 32px;
  font-weight: 900;
}
.cwd-hero .hero-sub {
  font-size: 18px;
  color: var(--cwd-gray-light);
  max-width: 700px;
  margin: 0 0 32px;
  line-height: 30px;
}
.cwd-hero .cta-phone {
  display: inline-block;
  background: var(--cwd-green);
  color: var(--cwd-white);
  font-size: 20px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  padding: 16px 40px;
  border-radius: 0;
  text-decoration: none;
  transition: background var(--cwd-transition);
}
.cwd-hero .cta-phone:hover {
  background: var(--cwd-green-hover);
}
.cwd-hero .hero-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* City page hero — keeps the dark centered style */
.cwd-hero.cwd-hero-dark {
  background: var(--cwd-dark);
  color: var(--cwd-white);
  text-align: center;
  padding: 80px 0 60px;
}
.cwd-hero.cwd-hero-dark h1,
.cwd-hero.cwd-hero-dark h2 {
  color: var(--cwd-white);
}
.cwd-hero.cwd-hero-dark .hero-sub {
  color: rgba(255,255,255,0.85);
  margin: 0 auto 32px;
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */
.cwd-breadcrumbs {
  background: var(--cwd-light);
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--cwd-border);
}
.cwd-breadcrumbs a {
  color: var(--cwd-dark);
  text-decoration: none;
}
.cwd-breadcrumbs a:hover { color: var(--cwd-green); }
.cwd-breadcrumbs span.sep { margin: 0 8px; color: #9E9E9E; }

/* ============================================================================
   CONTENT SECTIONS
   ============================================================================ */
.cwd-section { padding: 60px 0; }
.cwd-section.alt-bg { background: var(--cwd-light); }

.cwd-section h2 {
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 24px;
  color: var(--cwd-dark);
}

/* ============================================================================
   PURPLE CALLOUT BOX (matches live site accent)
   ============================================================================ */
.cwd-callout {
  background: var(--cwd-purple);
  color: var(--cwd-white);
  padding: 40px;
  margin: 40px 0;
  text-align: center;
}
.cwd-callout h2,
.cwd-callout h3 {
  color: var(--cwd-white);
  margin-bottom: 16px;
}
.cwd-callout p {
  color: rgba(255,255,255,0.9);
  font-size: 18px;
}
.cwd-callout .cta-phone {
  display: inline-block;
  background: var(--cwd-green);
  color: var(--cwd-white);
  font-size: 20px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 0;
  text-decoration: none;
  margin-top: 16px;
}
.cwd-callout .cta-phone:hover {
  background: var(--cwd-green-hover);
}

/* ============================================================================
   SERVICE CARDS (City Pages)
   ============================================================================ */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.service-card {
  background: var(--cwd-white);
  padding: 32px;
  box-shadow: var(--cwd-shadow);
  border-top: 4px solid var(--cwd-green);
  transition: transform var(--cwd-transition), box-shadow var(--cwd-transition);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.service-card h3 {
  color: var(--cwd-dark);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 12px;
}

/* ============================================================================
   FAQ ACCORDION
   ============================================================================ */
.cwd-faq { margin: 32px 0; }

.faq-item {
  border: 1px solid var(--cwd-border);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-question {
  background: var(--cwd-white);
  padding: 20px 48px 20px 24px;
  cursor: pointer;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  position: relative;
  transition: background var(--cwd-transition);
}
.faq-question:hover { background: var(--cwd-green-light); }
.faq-question::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--cwd-green);
  transition: transform var(--cwd-transition);
}
.faq-item.active .faq-question::after {
  content: '\2212';
}
.faq-answer {
  display: none;
  padding: 0 24px 20px;
  color: var(--cwd-gray-light);
  line-height: 1.8;
  font-size: 16px;
}
.faq-item.active .faq-answer { display: block; }

/* ============================================================================
   NEARBY CITIES GRID
   ============================================================================ */
.nearby-cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.nearby-cities a {
  display: block;
  padding: 12px 16px;
  background: var(--cwd-white);
  border: 1px solid var(--cwd-border);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--cwd-transition);
}
.nearby-cities a:hover {
  border-color: var(--cwd-green);
  background: var(--cwd-green-light);
}

/* ============================================================================
   STICKY CTA BAR (Mobile) — Dark bg like live site phone bar
   ============================================================================ */
.cwd-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cwd-dark);
  padding: 12px 16px;
  z-index: 999;
  text-align: center;
}
.cwd-cta-bar a {
  color: var(--cwd-white);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}
@media (max-width: 768px) {
  .cwd-cta-bar { display: block; }
  body { padding-bottom: 56px; }
}

/* ============================================================================
   FOOTER — Black bg (matches live site)
   ============================================================================ */
.site-footer {
  background: var(--cwd-black);
  color: #BDBDBD;
  padding: 60px 0 24px;
}
.site-footer h3,
.site-footer h4 {
  color: var(--cwd-white);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 16px;
}
.site-footer a {
  color: #BDBDBD;
  transition: color var(--cwd-transition);
}
.site-footer a:hover { color: var(--cwd-green); }

.footer-bottom {
  border-top: 1px solid #333333;
  padding-top: 24px;
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  color: #757575;
}

/* ============================================================================
   GOOGLE MAP EMBED
   ============================================================================ */
.cwd-map {
  overflow: hidden;
  box-shadow: var(--cwd-shadow);
  margin: 32px 0;
}
.cwd-map iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

/* ============================================================================
   CONTENT LINK STYLES (matches live: dark text, no underline)
   ============================================================================ */
.cwd-section a,
.entry-content a {
  color: var(--cwd-dark);
  text-decoration: none;
}
.cwd-section a:hover,
.entry-content a:hover {
  color: var(--cwd-green);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .cwd-hero { padding: 40px 16px; }
  .cwd-hero .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .cwd-hero h1 { font-size: 28px; }
  .cwd-hero .cta-phone { font-size: 18px; padding: 14px 28px; }
  .cwd-hero .hero-image { order: -1; }
  .cwd-section { padding: 40px 16px; }
  .cwd-section h2 { font-size: 28px; }
  .service-cards { grid-template-columns: 1fr; }
  h1 { font-size: 28px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
  .cwd-callout { padding: 24px 16px; }
}

@media (max-width: 480px) {
  .cwd-hero h1 { font-size: 24px; }
  .cwd-hero .cta-phone { font-size: 16px; padding: 12px 24px; }
  .nearby-cities { grid-template-columns: 1fr; }
}