@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

/* ============================================================
   LCGG — footer.css
   Mobile-first, flex-based, no tables
   Depends on CSS vars defined in site.css:
     --sage, --sage-pale, --blush, --cream, --charcoal,
     --wood, --white, --font-display, --font-body, --transition
   ============================================================ */

/* ── Shell ──────────────────────────────────────────────────── */
.site-footer {
    background: var(--c2-charcoal);
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--c2-font-body);
}

.footer-inner {
    max-width: var(--c2-max-width);
    margin: 0 auto;
    padding: 48px 24px 28px;
}

/* ── Columns wrapper ─────────────────────────────────────────
   Mobile:  single column, stacked
   ≥ 480px: 2 columns (brand full-width, then pairs)
   ≥ 768px: 4 columns side by side
   ──────────────────────────────────────────────────────────── */
.footer-cols {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 480px) {
    .footer-cols {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .footer-col {
        /* 2-up: two columns share the row, brand gets full width */
        flex: 1 1 calc(50% - 18px);
        min-width: 0;
    }

    .footer-col--brand {
        flex: 1 1 100%; /* brand spans full width on its own row */
    }
}

@media (min-width: 768px) {
    .footer-col {
        flex: 1 1 0;  /* all four columns equal width */
    }

    .footer-col--brand {
        flex: 1.6 1 0; /* brand column slightly wider */
    }
}

/* ── Brand column ────────────────────────────────────────────── */
.footer-logo-link {
    display: inline-block;
    margin-bottom: 12px;
}

.footer-logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}

.footer-tagline {
    font-family: var(--c2-font-display);
    font-style: italic;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 14px;
}

.footer-address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}

.footer-address a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--c2-transition);
}

.footer-address a:hover {
    color: var(--c2-blush);
}

/* ── Column headings ─────────────────────────────────────────── */
.footer-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 14px;
}

/* ── Link lists ──────────────────────────────────────────────── */
.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links li {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
}

.footer-links a {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--c2-transition);
}

.footer-links a:hover {
    color: var(--c2-blush);
}

/* ── Hours ───────────────────────────────────────────────────── */
.footer-hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 300;
}

.footer-hours-day {
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.footer-hours-time {
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

.footer-hours-note {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.35);
}

.footer-hours-note a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--c2-transition);
}

.footer-hours-note a:hover {
    color: var(--c2-blush);
}

.footer-hours-soon {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

/* ── Bottom bar ──────────────────────────────────────────────── */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.25);
}

@media (min-width: 640px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}