/* ==========================================================================
   Footer Styles - Best Plumber (Pencil.dev Bold Professional)
   ==========================================================================
   Two-tier footer: main 4-column grid + bottom bar.
   Dark charcoal palette. Matches Pencil frame OWPkp.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Main Footer - logo, tagline, phone, 3 link columns
   Pencil: padding [80, 120, 48, 120], gap 40, 4 columns
   -------------------------------------------------------------------------- */

.footer-main {
    background-color: var(--color-secondary-dark);
    color: var(--gray-300);
    padding: 80px 120px 48px;
}

.footer-main__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Brand Column */
.footer-main__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.footer-main__logo {
    display: inline-flex;
    text-decoration: none;
}

.footer-main__logo img {
    height: 44px;
    width: auto;
}

.footer-main__logo-text {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    line-height: 1;
}

.footer-main__tagline {
    color: var(--gray-400);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    max-width: 280px;
    margin-bottom: 0;
}

/* Phone number in brand column (Pencil: below tagline) */
.footer-main__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-inverse);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    transition: color var(--transition-fast);
}

.footer-main__phone:hover {
    color: var(--color-accent);
}

.footer-main__phone svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Hide badge pills (not in Pencil design) */
.footer-main__badges {
    display: none !important;
}

/* Link Columns */
.footer-main__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-main__column-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-inverse);
    margin-bottom: var(--space-xs);
}

.footer-main__column-content ul,
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-main__column-content a,
.footer-links a {
    color: var(--gray-400);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: block;
    padding: 2px 0;
}

.footer-main__column-content a:hover,
.footer-links a:hover {
    color: var(--color-accent);
    padding-left: 4px;
}

.footer-main__column-content p {
    color: var(--gray-400);
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}

/* Gold emergency text (Pencil: #FFDE69) */
.footer-emergency {
    color: var(--color-accent) !important;
    font-weight: var(--font-bold);
}

/* Contact bar - REMOVED (not in Pencil design) */
.footer-contact {
    display: none !important;
}


/* --------------------------------------------------------------------------
   Bottom Bar - copyright, legal links, social icons
   Pencil: 1px top border rgba(255,255,255,0.13), padding ~20px
   -------------------------------------------------------------------------- */

.footer-bottom {
    background-color: var(--color-secondary-dark);
    padding: var(--space-lg) 120px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto;
    gap: var(--space-lg);
}

.footer-bottom__copyright {
    color: var(--gray-500);
    font-size: var(--text-xs);
    margin-bottom: 0;
}

.footer-bottom__links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.footer-bottom__links a {
    color: var(--gray-500);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-bottom__links a:hover {
    color: var(--gray-300);
}

/* Social Icons */
.footer-bottom__social {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--gray-400);
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.footer-social-link:hover {
    color: var(--text-inverse);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.footer-social-link svg {
    flex-shrink: 0;
}

/* Focus-visible states */
.footer-main__phone:focus-visible,
.footer-bottom__links a:focus-visible,
.footer-links a:focus-visible,
.footer-main__logo:focus-visible,
.footer-social-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
    .footer-main {
        padding: 60px 40px 40px;
    }

    .footer-main__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .footer-main__brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        padding: var(--space-lg) 40px;
    }

    .footer-bottom__inner {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
}

@media (max-width: 690px) {
    .footer-main {
        padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
    }

    .footer-main__inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-main__tagline {
        max-width: 100%;
    }

    .footer-bottom {
        padding: var(--space-lg);
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .footer-bottom__links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-bottom__social {
        justify-content: center;
    }
}