/* Shared Footer Styles */
footer {
    margin-top: 4rem;
    padding: 4rem 2rem 2rem;
    background: var(--navy);
    border-top: 1px solid var(--border-light);
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border-light);
}

.footer-newsletter h3 {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

.footer-newsletter p {
    font-size: 0.875rem;
    color: var(--text-lighter);
    max-width: 300px;
}

.cta-form {
    display: flex;
    max-width: 440px;
    background: var(--navy-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.375rem;
}

.cta-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--white);
    font-family: inherit;
    outline: none;
}

.cta-form input::placeholder {
    color: var(--text-lighter);
}

/* The footer is injected into 2,000+ pages, each carrying its own stylesheet
   that redefines .btn and .cta-form, so the subscribe box kept coming out
   wrong in two ways. iOS Safari painted its own rounded field chrome inside
   our box, because the input never opted out of the native appearance —
   border:none alone does not do it there. And pages whose design language is
   pill buttons gave the button a 999px radius inside a 12px container, so a
   capsule sat in a rounded rectangle with its ends poking at the edge.
   Pin both here. Scoping to .footer-top wins on specificity over the bare
   .cta-form rules those pages declare, whatever order they load in. */
.footer-top .cta-form {
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
}

.footer-top .cta-form input {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 12px container radius less its 6px padding — concentric with the box. */
.footer-top .cta-form .btn {
    flex: none;
    border-radius: 8px;
}

/* Inline confirmation shown in place of the form after a successful subscribe. */
.cta-form-success {
    align-self: center;
    margin: 0;
    max-width: 440px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 3rem;
}

.footer-brand .logo img {
    height: 28px;
    width: auto;
}

.footer-brand p {
    color: var(--text-lighter);
    font-size: 0.875rem;
    margin-top: 1rem;
    max-width: 280px;
    line-height: 1.6;
}

.footer-certifications {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.footer-certifications .cert-badge {
    height: 28px;
    width: auto;
}

.footer-cert-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-lighter);
}

.footer-column h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-lighter);
    margin-bottom: 1.25rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 0.625rem;
}

.footer-column a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s;
}

.footer-column a:hover {
    color: var(--white);
}

.footer-bottom {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--text-lighter);
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a {
    color: var(--text-lighter);
    text-decoration: none;
}

.footer-legal a:hover {
    color: var(--text-light);
}

/* Footer Responsive */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer-top {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .footer-top .cta-form {
        width: 100%;
        max-width: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}