/*
 * PivHub CSS Module: 03-footer.css
 * Footer styles.
 */

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--theme-bg-deep);
    border-top: 1px solid var(--color-on-dark-line);
}

.footer-main {
    padding-block: var(--space-10) var(--space-6);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-6);
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    display: block;
    width: min(220px, 100%);
    height: auto;
    margin-bottom: var(--space-2);
}

.footer-tagline {
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--color-on-dark-medium);
    margin-bottom: var(--space-2);
    letter-spacing: 0.03em;
}

.footer-desc {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--color-muted);
    margin-bottom: var(--space-3);
}

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

.footer-col ul a {
    font-size: var(--fs-caption);
    color: var(--color-muted);
    transition: color var(--transition), padding-left var(--transition);
    display: inline-block;
}

.footer-col ul a:hover {
    color: var(--color-on-dark-strong);
    padding-left: 4px;
}

.footer-heading {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-on-dark-strong);
    margin-bottom: var(--space-3);
}

.footer-contact {
    gap: var(--space-2);
}

.footer-contact li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-label {
    font-size: var(--fs-micro);
    color: var(--color-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.contact-value {
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 0.85);
}

.contact-link {
    transition: color var(--transition);
}

.contact-link:hover {
    color: var(--color-on-dark-strong);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-block: var(--space-3);
}

.footer-bottom-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    text-align: center;
}

.footer-bottom-inner p {
    font-size: var(--fs-micro);
    color: var(--color-muted);
    letter-spacing: 0.03em;
}