/* =====================================================
   Electrician Theme - Custom CSS
   Includes wiring diagram background and readability fixes
   ===================================================== */

/* Bootstrap overrides (keep existing) */
.btn-primary {
    background-color: #f0a500;
    border-color: #f0a500;
}
.btn-primary:hover {
    background-color: #c97e00;
    border-color: #c97e00;
}
.btn-outline-primary {
    color: #f0a500;
    border-color: #f0a500;
}
.btn-outline-primary:hover {
    background-color: #f0a500;
    border-color: #f0a500;
}

/* Wiring diagram background – subtle and non‑distracting */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/wiring-diagram.svg');
    background-repeat: repeat;         /* or 'no-repeat' for a single centered image */
    background-size: cover;            /* cover entire area; adjust as needed */
    background-position: center;
    opacity: 0.7;                     /* low opacity – diagram is visible but text stays readable */
    z-index: -1;                       /* send behind all content */
    pointer-events: none;              /* ensures clicks pass through */
}

/* Optional: Add a light semi‑transparent overlay behind content
   to further improve text contrast */
.site-header,
.site-main,
.site-footer {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}
/* Remove extra padding from full-width sections if needed */
.hero, .contact-info {
    background-color: rgba(0, 0, 0, 0.7);
}
.hero h1, .hero p, .contact-info h4, .contact-info p {
    color: #fff;
}

/* Ensure the wiring diagram doesn't cause text to blend in */
body {
    background-color: #f8f9fa; /* fallback if SVG fails to load */
}