/* ==========================================================================
   Legacy Garage Repair — Theme Stylesheet
   ========================================================================== */

:root {
  --navy: #0A1F44;
  --orange: #E8730A;
  --warm: #F9F7F4;
  --text: #1A1A1A;
  --muted: #6B7280;
  --border: #E5E7EB;
  --white: #FFFFFF;
}

  /* ==========================================================================
     HERO CANVAS COMPONENT
     ========================================================================== */
 .overlaid-hero-canvas { 
    position: relative; 
    padding: 8rem 0; 
    /* Background url removed from here—now injected dynamically via PHP */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    background-attachment: fixed;
    color: #fff;
    display: flex;
    align-items: center;
    min-height: 450px;
  }
  .overlaid-hero-canvas::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(135deg, rgba(10, 31, 68, 0.95) 0%, rgba(10, 31, 68, 0.75) 100%); 
    z-index: 1; 
  }
  .hero-overlay-content {text-align: center; position: relative; z-index: 2; width: 100%; }
  .hero-overlay-content h1 { font-size: 3rem; color: #fff; margin-bottom: 0.75rem; }
  @media(min-width: 768px) { .hero-overlay-content h1 { font-size: 4.5rem; } }
  
  .overlay-breadcrumbs { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 0.6rem; letter-spacing: 0.05em; justify-content: center; }
  .overlay-breadcrumbs a { color: #fff; text-decoration: none; transition: color 0.2s; }
  .overlay-breadcrumbs a:hover { color: var(--orange); }
  .overlay-breadcrumbs .active-crumb { color: var(--orange); }



   /* ==========================================================================
     CONVERSION BILLBOARD TERMINAL
     ========================================================================== */
  .conversion-billboard { padding: 3rem 0 5rem; background: var(--warm); }
  .billboard-container { background: linear-gradient(135deg, var(--navy) 0%, #0d2958 100%); border-radius: 16px; padding: 5rem 2rem; text-align: center; color: #fff; box-shadow: 0 35px 70px rgba(10,31,68,0.18); position: relative; overflow: hidden; }
  @media(min-width: 768px) { .billboard-container { padding: 7rem 5rem; } }
  .billboard-container h2 { color: #fff; font-size: 2.5rem; text-transform: uppercase; margin: 0 auto 1.5rem; max-width: 800px; }
  @media(min-width: 768px) { .billboard-container h2 { font-size: 3.5rem; } }
  .billboard-container p { color: rgba(255,255,255,0.85); font-size: 1.15rem; max-width: 700px; margin: 0 auto 2.75rem; line-height: 1.7; }
  .billboard-actions-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }