/* Updated Footer Styles with Yellow Accents */

/* Footer container */
footer, .footer {
    background-color: #1a1a1a; /* Darker background for better contrast */
    color: #ffffff; /* White text for better readability */
    padding: 2rem 0;
    margin-top: 2rem;
}

/* Footer headings */
footer h4, 
footer h5,
.footer h4,
.footer h5 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    border-bottom: 2px solid #ffd700; /* Changed to yellow border */
    padding-bottom: 10px;
    display: inline-block;
}

/* Footer links */
footer a,
.footer a {
    color: #e0e0e0; /* Light gray links for better contrast on blue background */
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover,
.footer a:hover {
    color: #ffd700; /* Yellow hover state for better contrast */
    text-decoration: underline;
}

/* Footer navigation lists */
footer ul,
.footer-links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

footer ul li,
.footer-links li {
    margin-bottom: 0.5rem; /* Add space between list items */
}

/* Contact information */
.footer-contact p {
    color: #e0e0e0; /* Light gray for regular text */
    margin-bottom: 0.5rem;
}

.footer-contact i {
    margin-right: 0.5rem;
    color: #ffd700; /* Match icon color with yellow accent */
}

/* Social media icons */
.social-icons a,
.footer-social a {
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.5rem;
    color: #e0e0e0; /* Light gray for icons */
    transition: transform 0.3s, color 0.3s;
}

.social-icons a:hover,
.footer-social a:hover {
    color: #ffd700; /* Yellow on hover */
    transform: translateY(-3px); /* Slightly move up on hover */
}

/* Copyright section */
.footer-bottom {
    border-top: 1px solid #333333;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
    color: #cccccc; /* Lighter than regular text */
}

/* Make links in footer-bottom more visible */
.footer-bottom a {
    color: #e0e0e0;
    font-weight: 500;
}

.footer-bottom a:hover {
    color: #ffd700;
}

/* Service icons styling */
.service-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffd700; /* Yellow icons */
}

/* Emergency service box */
.emergency-service {
    background-color: #dc3545;
    padding: 1.5rem;
    border-radius: 8px;
    color: white;
}

.emergency-service h3 {
    color: white;
    border-bottom: none;
}

.emergency-service a.phone {
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    background: rgba(255,255,255,0.2);
    padding: 8px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
}

.emergency-service a.phone:hover {
    background: rgba(255,255,255,0.3);
    color: white;
    text-decoration: none;
}

/* Account access section styles */
.account-access-section {
    padding: 15px 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.account-access-section .btn {
    margin: 0 5px;
    font-weight: 500;
}

/* Service area badges */
.service-area {
    display: inline-block;
    padding: 5px 15px;
    background-color: rgba(255,255,255,0.1);
    color: white;
    border-radius: 20px;
    margin: 5px;
    transition: all 0.3s ease;
}

.service-area:hover {
    background-color: #ffd700;
    color: #1a1a1a;
    text-decoration: none;
}

.nationwide {
    background-color: #ffd700;
    color: #1a1a1a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-col {
        margin-bottom: 1.5rem;
    }
    
    .footer-social a {
        margin-right: 0.8rem;
        font-size: 1.3rem;
    }
    
    .account-access-section .btn {
        margin: 5px 3px;
        font-size: 0.85rem;
    }
}

/* Ensure footer headings have yellow borders */
.footer h5, 
footer h5 {
    border-bottom: 2px solid #f59e0b !important; /* Force yellow border */
    display: inline-block !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* Ensure link hover states are yellow */
.footer a:hover,
footer a:hover {
    color: #f59e0b !important; /* Yellow on hover */
    text-decoration: none !important;
}

/* Ensure social icon hover states are yellow */
.footer-social a:hover,
.social-icons a:hover {
    color: #f59e0b !important; /* Yellow on hover */
    transform: translateY(-3px) !important;
}

/* Adjustments for blue background footer */
footer, .footer {
    background-color: #004080 !important; /* Override to match your site's blue footer */
}

/* Additional specificity for footer heading links */
.footer h5 a, 
footer h5 a {
    color: #ffffff !important; /* White text for headings */
}

/* Ensure footer links are properly colored */
.footer-links a,
footer ul a {
    color: rgba(255, 255, 255, 0.8) !important; /* Slightly transparent white */
}

/* Fix emergency box colors */
.emergency-service {
    background-color: #dc3545 !important; /* Bright red emergency box */
}

/* Fix service area badge hover colors */
.service-area:hover {
    background-color: #f59e0b !important; /* Yellow hover on location badges */
    color: #004080 !important; /* Dark blue text on hover */
}

/* Nationwide badge */
.nationwide {
    background-color: #f59e0b !important; /* Yellow badge */
    color: #004080 !important; /* Dark blue text */
}