/* footer.css — site footer, footer extras, scroll-reveal animations. */

/* ─── Footer ───────────────────────────────────────────────────── */
.site-footer {
    background: var(--color-bg-soft);
    padding-block: var(--space-7);
    border-top: 1px solid var(--color-border);
}
.site-footer__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}
@media (min-width: 600px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.site-footer__brand .site-footer__name {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.site-footer__tagline {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    max-width: 36ch;
}
.site-footer__heading {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-block: var(--space-2); }
.site-footer__col a { color: var(--color-muted); }
.site-footer__col a:hover,
.site-footer__col a:focus-visible { color: var(--color-green-dark); }
.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
}
.site-footer__bottom-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.site-footer__legal {
    list-style: none;
    display: flex;
    gap: var(--space-4);
    padding: 0;
    margin: 0;
}
.site-footer__legal a { color: var(--color-muted); }
.site-footer__top-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* Footer extras */
.site-footer__social {
    list-style: none; padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    gap: var(--space-2);
}
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    color: var(--color-muted);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.site-footer__social a:hover {
    color: #fff;
    background: var(--color-green);
    border-color: var(--color-green);
}
.site-footer__hours {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

/* Scroll-reveal — applied to anything tagged data-reveal.
   Default state: invisible + nudged 12px down. is-revealed releases.
   prefers-reduced-motion blanks the transform/opacity transition.

   Variants (set the attribute value):
     data-reveal              up (default) — fades in from 12px down
     data-reveal="up"         same as default
     data-reveal="scale"      scales from .96 + fades in
     data-reveal="left"       slides 18px from left + fades in
     data-reveal="right"      slides 18px from right + fades in

   Stagger: parent with [data-reveal-stagger] gets each child auto-
   tagged + assigned --stagger-i (0..11) by reveal.js. Each child's
   transition-delay reads from that variable so children appear in
   sequence — 70ms gap, capped at 12 children. */
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                transform var(--duration-slow) var(--ease-out-expo);
    transition-delay: calc(var(--stagger-i, 0) * 70ms);
    will-change: opacity, transform;
}
[data-reveal="scale"]  { transform: scale(.96); }
[data-reveal="left"]   { transform: translateX(-18px); }
[data-reveal="right"]  { transform: translateX(18px); }
[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}