/* ==========================================================================
   Section S-010 Footer - NVM Pet Variation A (Heritage Industrial)
   ==========================================================================
   Maxbone-inspired 4-column footer on navy --color-primary background.
   Continuous with S-009 above (no top border, no margin gap). Mobile
   columns 2 to N collapse to native <details> accordions. Brand col +
   Connect col always open.

   Tokens only. No raw hex / px / font-family in this file except where
   rgba alpha overlays are required on --color-primary (documented inline).
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────
   Shell - navy band continuous with S-009
   ────────────────────────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-primary);
    color: var(--text-on-dark);
    /* No top border. S-009 ends in --color-primary; footer begins in
       --color-primary -- they read as one closing band. */
}

.site-footer__container {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

@media (min-width: 768px) {
    .site-footer__container {
        padding-inline: var(--space-xl);
    }
}


/* ──────────────────────────────────────────────────────────────────
   Top: 4-column grid
   ────────────────────────────────────────────────────────────────── */
.site-footer__top {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: var(--space-3xl);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--space-xl);
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: var(--space-2xl);
    }
}


/* ──────────────────────────────────────────────────────────────────
   Column 1 - Brand
   ────────────────────────────────────────────────────────────────── */
.footer-col--brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-brand__logo-link {
    display: inline-block;
    line-height: 1;
}

.footer-brand__logo {
    display: block;
    max-width: 160px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Fallback: if only the color logo is available, invert it to read on navy. */
.footer-brand__logo--invert {
    filter: brightness(0) invert(1);
}

.footer-brand__wordmark {
    font-family: var(--font-heading);
    font-weight: var(--font-extrabold);
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    color: var(--text-on-dark);
}

.footer-brand__desc {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--font-regular, 400);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-secondary);
    max-width: 38ch;
}

.footer-brand__address {
    margin: 0;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-on-dark);
    opacity: 0.92;
}

.footer-brand__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-brand__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-on-dark);
    text-decoration: none;
    transition: color var(--duration-base) var(--easing-default);
}

.footer-brand__link:hover,
.footer-brand__link:focus-visible {
    color: var(--color-secondary);
}


/* ──────────────────────────────────────────────────────────────────
   Columns 2-N - Link columns (native <details> accordions on mobile)
   ────────────────────────────────────────────────────────────────── */
.footer-col--links {
    /* <details> resets */
    margin: 0;
    padding: 0;
    border: 0;
}

/* Strip default disclosure marker (Safari, Firefox) */
.footer-col--links summary {
    list-style: none;
}
.footer-col--links summary::-webkit-details-marker {
    display: none;
}
.footer-col--links summary::marker {
    content: '';
}

.footer-col__title {
    /* Used by both <summary> and the static Connect <h3> */
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    font-variant-caps: small-caps;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-on-dark);
}

.footer-col--links summary.footer-col__title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-sm);
    border-bottom: 1px solid rgba(247, 244, 238, 0.12); /* off-white at low alpha on navy */
    user-select: none;
}

.footer-col__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-base) var(--easing-default);
    color: var(--text-on-dark);
    opacity: 0.7;
}

.footer-col--links[open] > summary .footer-col__chevron {
    transform: rotate(180deg);
}

.footer-col__links {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-col__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-on-dark);
    text-decoration: none;
    transition: color var(--duration-base) var(--easing-default);
    opacity: 0.92;
}

.footer-col__link:hover,
.footer-col__link:focus-visible {
    color: var(--color-secondary);
    opacity: 1;
}


/* Desktop: <details> always open, no chevron, no clickable summary, no bottom rule */
@media (min-width: 768px) {
    .footer-col--links {
        display: block;
    }

    .footer-col--links summary.footer-col__title {
        cursor: default;
        padding-block: 0;
        border-bottom: 0;
        pointer-events: none;
    }

    .footer-col__chevron {
        display: none;
    }

    .footer-col__links {
        margin-top: 0;
    }
}


/* ──────────────────────────────────────────────────────────────────
   Column N+1 - Connect (social icons)
   ────────────────────────────────────────────────────────────────── */
.footer-col--connect {
    display: flex;
    flex-direction: column;
}

.footer-col__title--static {
    /* Connect column title is a plain <h3>, not a <summary>. */
}

.footer-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(247, 244, 238, 0.22);
    color: var(--text-on-dark);
    background-color: transparent;
    text-decoration: none;
    transition: background-color var(--duration-base) var(--easing-default),
                border-color var(--duration-base) var(--easing-default),
                color var(--duration-base) var(--easing-default);
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-primary);
    outline: none;
}

.footer-social__link svg {
    display: block;
}


/* ──────────────────────────────────────────────────────────────────
   Cert + retailer band (full-width below columns)
   ────────────────────────────────────────────────────────────────── */
.site-footer__band {
    border-top: 1px solid rgba(247, 244, 238, 0.12);
    padding-block: var(--space-xl);
}

.footer-certs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
}

/* On-dark cert badges: text-only marks, no boxed container, color-coded
   text instead of the boxed cards used in S-008. Specificity must beat
   `.cert-badge { ... }` in sections.css (which loads after footer.css). */
.site-footer .footer-certs .cert-badge,
.site-footer .footer-certs .cert-badge.cert-badge--on-dark {
    border: 0;
    background-color: transparent;
    padding: 0;
    width: auto;
    min-height: 0;
    gap: var(--space-sm);
    flex-direction: row;
    align-items: center;
}

.site-footer .footer-certs .cert-badge::before {
    /* Keep the S-008 styled-text glyph but slightly smaller for footer scale */
    width: 28px;
    height: 28px;
}

.site-footer .footer-certs .cert-badge--madeinusa::before {
    width: 36px;
    height: 24px;
}

/* Marks: light off-white on dark for all three (override S-008 dark colors) */
.site-footer .footer-certs .cert-badge__mark,
.site-footer .footer-certs .cert-badge--certipur .cert-badge__mark,
.site-footer .footer-certs .cert-badge--oekotex .cert-badge__mark,
.site-footer .footer-certs .cert-badge--madeinusa .cert-badge__mark {
    color: var(--text-on-dark);
    font-size: var(--text-caption);
    letter-spacing: 0.1em;
}

/* Retailer mention */
.footer-retailers {
    margin: var(--space-md) auto 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-secondary);
    text-align: center;
    opacity: 0.95;
}


/* ──────────────────────────────────────────────────────────────────
   Legal row
   ────────────────────────────────────────────────────────────────── */
.site-footer__legal {
    border-top: 1px solid rgba(247, 244, 238, 0.1);
    padding-block: var(--space-md);
}

.site-footer__legal-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    justify-content: space-between;
}

@media (min-width: 640px) {
    .site-footer__legal-inner {
        flex-direction: row;
        align-items: center;
    }
}

.footer-legal__copy {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--text-on-dark);
    opacity: 0.7;
    letter-spacing: 0.02em;
}

.footer-legal__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.footer-legal__links li {
    position: relative;
    padding-right: var(--space-md);
}

.footer-legal__links li:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-on-dark);
    opacity: 0.4;
    font-size: 1rem;
    line-height: 1;
}

.footer-legal__links li:last-child {
    padding-right: 0;
}

.footer-legal__link {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--text-on-dark);
    text-decoration: none;
    opacity: 0.7;
    letter-spacing: 0.02em;
    transition: color var(--duration-base) var(--easing-default),
                opacity var(--duration-base) var(--easing-default);
}

.footer-legal__link:hover,
.footer-legal__link:focus-visible {
    color: var(--color-secondary);
    opacity: 1;
}


/* ──────────────────────────────────────────────────────────────────
   Mobile refinements (<768px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .site-footer__top {
        padding-top: clamp(3rem, 10vw, 5rem);
        padding-bottom: var(--space-2xl);
    }

    /* Brand col stays open (always visible); link cols collapse closed by
       default would require [open] removal but the brief asked native
       behavior. Default to open; users can collapse. */

    .footer-certs {
        gap: var(--space-lg);
    }

    .site-footer__band {
        padding-block: var(--space-lg);
    }
}