/*
 * Site footer — brand-logo strip + meta region.
 */

.ecko-site-footer {
    background-color: var(--forest-deep);
    color: var(--paper);
    margin-top: 64px;
}

/*
 * Brand strip — top of footer.
 *
 * Owner mockup: an eyebrow "BRANDS WE CARRY" on the forest-deep band,
 * with a full-bleed white strip below it containing the 7 supplier
 * logos in a single horizontal row.
 */
.ecko-footer-brand-strip {
    padding: 32px 0 0;
}

.ecko-footer-brand-strip__heading {
    text-align: center;
    color: color-mix(in oklch, var(--paper) 92%, transparent);
    margin: 0 0 24px;
}

/* Full-bleed white band — extends to viewport edges. */
.ecko-footer-brand-strip__band {
    background-color: var(--paper);
    padding: 18px 0;
    border-top: 1px solid color-mix(in oklch, var(--paper) 10%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--paper) 10%, transparent);
}

/*
 * Layout via CSS grid — 7 equal columns guarantees all 7 logos sit in
 * one row at desktop widths regardless of their natural lockup widths
 * (e.g. Georgia-Pacific and Kimberly-Clark are much wider than 3M and
 * Tork). Falls to 4-column then 3-column grids on smaller viewports.
 */
.ecko-footer-brand-strip__list {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
    justify-items: center;
}

.ecko-footer-brand-strip__item {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0; /* allow grid item to shrink below content width */
}

/*
 * Each owner-supplied logo is exported at 200px tall (varying widths).
 * Fit to the grid cell with `max-width: 100%` so wider lockups (GP,
 * Kimberly-Clark) scale down without crowding their neighbors;
 * `object-fit: contain` keeps aspect.
 *
 * Selector uses the band wrapper + img tag to bump specificity above
 * Kadence's `.woocommerce-page img { height: auto }` rule (which loads
 * later and otherwise won on equal specificity).
 */
.ecko-footer-brand-strip__band img.ecko-footer-brand-strip__logo {
    display: block;
    width: auto;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .ecko-footer-brand-strip__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
    .ecko-footer-brand-strip__band img.ecko-footer-brand-strip__logo {
        height: 44px;
    }
}

@media (max-width: 480px) {
    .ecko-footer-brand-strip__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .ecko-footer-brand-strip__band img.ecko-footer-brand-strip__logo {
        height: 36px;
    }
}

/* Inside the dark footer, headings + the wordmark take --paper instead of
   their default --ink color. Lockup color is deliberately overridden inline
   in footer-meta.php to --kelly (5:1 on --forest-deep). */
.ecko-footer-meta .ecko-brand-row__wordmark,
.ecko-footer-meta .ecko-h3 {
    color: var(--paper);
}

/*
 * Footer logo — same image as the header but inverted to paper so the
 * dark-green art reads on the forest-deep footer surface. Replaces the
 * text wordmark when the bundled logo file is present.
 */
.ecko-footer-meta__logo {
    display: inline-block;
    margin-bottom: 8px;
    text-decoration: none;
}

.ecko-footer-meta__logo img {
    display: block;
    max-width: 220px;
    height: auto;
    /* Convert the dark-green logo to paper-white so it's legible on the
       forest-deep footer band. Removes hue from the leaf accent — the
       owner can replace with a dedicated white-version art later. */
    filter: brightness(0) invert(1);
}

/* Meta — bottom of footer */
.ecko-footer-meta__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 16px 24px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}

.ecko-footer-meta__about {
    margin-top: 12px;
    color: color-mix(in oklch, var(--paper) 80%, transparent);
    font-size: 14px;
    max-width: 36ch;
}

.ecko-footer-meta__column h3 {
    margin-bottom: 12px;
}

.ecko-footer-meta__column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ecko-footer-meta__column li {
    margin-bottom: 8px;
}

.ecko-footer-meta__column a,
.ecko-footer-meta__column address a {
    color: color-mix(in oklch, var(--paper) 80%, transparent);
    text-decoration: none;
    font-size: 14px;
}

.ecko-footer-meta__column a:hover,
.ecko-footer-meta__column a:focus-visible {
    color: var(--kelly);
}

.ecko-footer-meta__column address {
    font-style: normal;
    font-size: 14px;
    color: color-mix(in oklch, var(--paper) 80%, transparent);
    line-height: 1.7;
}

.ecko-footer-meta__bottom {
    border-top: 1px solid color-mix(in oklch, var(--paper) 15%, transparent);
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: color-mix(in oklch, var(--paper) 65%, transparent);
}

@media (max-width: 767px) {
    .ecko-footer-meta__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ecko-footer-meta__about {
        margin-left: auto;
        margin-right: auto;
    }
}