/* Public marketing footer: brand + social, three link columns, legal bar. */
.public-footer {
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
}

/* The footer spans the full viewport width (with gutters) rather than the centred content cap,
   so the brand pins to the far left and the link columns to the far right. */
.public-footer .wrap {
    max-width: none;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

.public-footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.public-footer__brand { max-width: 360px; }

.public-footer__logo {
    font: var(--text-headline-md);
    font-weight: 800;
    color: var(--primary);
}

.public-footer__brand p {
    color: var(--on-surface-variant);
    font: var(--text-body-sm);
    margin-top: var(--space-md);
}

.public-footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }

.public-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--surface-container);
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.public-footer__social a:hover { background: var(--primary-container); color: #fff; }
.public-footer__social svg { width: 18px; height: 18px; fill: currentColor; }

.public-footer__cols { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-xl); }

.footer-col { display: flex; flex-direction: column; gap: var(--space-sm); }

.footer-col__title {
    font: var(--text-label-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.footer-col a { font: var(--text-body-sm); color: var(--on-surface-variant); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--primary); }

.public-footer__bar {
    border-top: 1px solid var(--outline-variant);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
}

.public-footer__bar p { color: var(--on-surface-variant); font: var(--text-body-sm); opacity: 0.8; }
.public-footer__badges { display: flex; gap: var(--space-md); align-items: center; }

.public-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font: var(--text-label-md);
    color: var(--on-surface-variant);
}

.public-footer__badge .material-symbols-outlined { font-size: 16px; color: var(--success); }

@media (max-width: 700px) {
    .public-footer__cols { grid-template-columns: repeat(2, auto); }
}