/* Shared footer (sales_v4/components/footer.html).
   The same component is rendered by the sales_v4 layout and the legacy
   sales_v2 layout. Its markup keeps Tailwind utility class names, so this file
   re-declares the small set of utilities and element resets the footer needs,
   scoped to `.bm-footer`. That way the component renders identically whether it
   sits on top of the compiled Tailwind bundle (sales_v4) or the Bootstrap
   theme (sales_v2), without either framework's reset leaking in or out.

   The Bootstrap theme happens to define a few of the same class names with
   `!important` and different values (.gap-9, .gap-12, .py-16), so the matching
   rules here are marked `!important` as well to win on specificity. */

.bm-footer {
    box-sizing: border-box;
    line-height: 110%;
}

.bm-footer *,
.bm-footer *::before,
.bm-footer *::after {
    box-sizing: border-box;
    line-height: 110%;
}

.bm-footer ul,
.bm-footer ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-footer h1,
.bm-footer h2,
.bm-footer h3,
.bm-footer h4,
.bm-footer h5,
.bm-footer h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.bm-footer p {
    margin: 0;
}

.bm-footer a {
    color: inherit;
    text-decoration: inherit;
}

.bm-footer svg {
    display: block;
    vertical-align: middle;
}

.bm-footer .w-full { width: 100%; }
.bm-footer .bg-black { background-color: #000 !important; }
.bm-footer .bg-foreground { background-color: #000; }
.bm-footer .flex { display: flex; }
.bm-footer .flex-col { flex-direction: column; }
.bm-footer .flex-wrap { flex-wrap: wrap !important; }
.bm-footer .justify-center { justify-content: center; }
.bm-footer .justify-between { justify-content: space-between; }
.bm-footer .text-white { color: #fff !important; }
.bm-footer .text-sm { font-size: 0.875rem; }
.bm-footer .gap-2 { gap: 0.5rem !important; }
.bm-footer .gap-9 { gap: 2.25rem !important; }
.bm-footer .gap-12 { gap: 3rem !important; }
.bm-footer .mb-2 { margin-bottom: 0.5rem !important; }
.bm-footer .\!py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.bm-footer .space-y-1 > :not(:last-child) { margin-bottom: 0.25rem; }
.bm-footer .hover\:underline:hover { text-decoration: underline; }

/* Touch targets: the sales_v4 build raises every footer link to 24px so it
   clears the minimum tap size. Mirror it here so both layouts match. */
.bm-footer a.hover\:underline {
    display: inline-block;
    min-height: 24px;
}

.bm-footer .margin-wrapper {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* The section links sit a step lighter than the section headings. */
.bm-footer .space-y-1 > li > a {
    font-weight: 200;
}

@media (min-width: 1024px) {
    .bm-footer .margin-wrapper {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .bm-footer .lg\:flex-row { flex-direction: row; }
    .bm-footer .lg\:justify-between { justify-content: space-between; }
    .bm-footer .lg\:gap-56 { gap: 14rem !important; }
}

@media (min-width: 1536px) {
    .bm-footer .margin-wrapper {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}