/* =====================================================================
   home-footer.css — shared deep-ink site footer (.home-footer).
   Loaded on every page that renders templates/base/home-footer.html
   (/home, /for-manufacturers, /education).
   Self-contained: the dark palette + monospace voice are declared locally
   on .home-footer, and the only thing borrowed from style.css is the
   global --my-red brand accent — so these rules never restyle the rest of
   the (otherwise light) page they sit on. A deep ink slab anchors it.
   ===================================================================== */

/* The footer is a normal block at the end of the document flow, NOT the
   fixed-bottom base/footer.html it replaces — so drop the 57px reserve
   style.css keeps for that fixed footer, otherwise an empty strip shows
   below the slab. */
body { padding-bottom: 0 !important; }

/* Mirror Bootstrap 5.3's responsive .container (base.html wraps the page in
   one) so the footer slab lines up with the navbar at every breakpoint:
   same max-widths and 12px gutter. */
.home-footer__wrap {
    width: 100%;
    margin-inline: auto;
    padding-inline: 0.75rem;
}
@media (min-width: 576px)  { .home-footer__wrap { max-width: 540px; } }
@media (min-width: 768px)  { .home-footer__wrap { max-width: 720px; } }
@media (min-width: 992px)  { .home-footer__wrap { max-width: 960px; } }
@media (min-width: 1200px) { .home-footer__wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .home-footer__wrap { max-width: 1320px; } }

/* ============================ footer ============================== */
.home-footer {
    --fg: #c2cad6;          /* body text on dark */
    --fg-dim: #8d97a8;      /* muted */
    --fg-strong: #eef1f6;   /* headings / hover */
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono",
        Menlo, Consolas, "Liberation Mono", monospace;
    background:
        radial-gradient(120% 140% at 0% 0%, #1b2330, #11151c 60%);
    color: var(--fg);
    font-size: 0.95rem;
}

.home-footer__wrap {
    /* width / max-width / centering shared with the Bootstrap container mirror above */
    padding: clamp(44px, 6vh, 64px) 0.75rem clamp(20px, 2.5vh, 28px);
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: clamp(36px, 6vw, 88px);
}

/* ---- brand block ---- */
.home-footer__logo {
    display: inline-block;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1;        /* tighten leading so the wordmark sits up level with the column heads */
    letter-spacing: -0.02em;
    color: var(--fg-strong);
    text-decoration: none;
}
.home-footer__logo-accent { color: var(--my-red, #bf4342); }

.home-footer__tagline {
    margin: 0.8rem 0 1.2rem;
    max-width: 30ch;
    color: var(--fg-strong);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.6;
}

.home-footer__contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.home-footer__line {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--fg);
    text-decoration: none;
    line-height: 1.5;
}
.home-footer__line i {
    color: var(--my-red, #bf4342);
    font-size: 1rem;
    line-height: 1.5;
    flex: none;
}
a.home-footer__line:hover { color: var(--fg-strong); }
a.home-footer__line:hover i { filter: brightness(1.25); }
/* small muted qualifier, e.g. the "DE / EN" call-centre language note */
.home-footer__hint {
    color: var(--fg-dim);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    margin-left: 0.35rem;
}

/* ---- social icons (bare glyphs, no button chrome) ---- */
.home-footer__social {
    display: flex;
    gap: 1rem;
    margin-top: 1.1rem;
}
.home-footer__social-btn {
    display: inline-flex;
    color: var(--fg-dim);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease;
}
.home-footer__social-btn--yt:hover { color: #ff0033; }
.home-footer__social-btn--li:hover { color: #0a66c2; }

/* ---- link columns ---- */
.home-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
}
.home-footer__head {
    font-family: var(--mono);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--my-red, #bf4342);
    margin: 0 0 1.1rem;
}
.home-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.home-footer__col a {
    display: inline-flex;
    align-items: flex-start;     /* keep the icon on the first line when a long label wraps */
    gap: 0.55rem;
    line-height: 1.4;
    color: var(--fg);
    text-decoration: none;
    transition: color 0.15s ease;
    overflow-wrap: break-word;   /* long localized labels wrap instead of overflowing the column */
}
.home-footer__col a i {
    flex: none;
    font-size: 1.05rem;
    color: var(--fg-dim);
    transition: color 0.15s ease;
}
.home-footer__col a:hover { color: var(--fg-strong); text-decoration: underline; }
.home-footer__col a:hover i { color: var(--fg-strong); }

/* ---- bottom bar ---- */
.home-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.home-footer__bar-inner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: clamp(13px, 2vh, 18px);
    padding-bottom: clamp(13px, 2vh, 18px);
}
.home-footer__copy {
    color: var(--fg-dim);
    font-size: 0.85rem;
}
.home-footer__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--fg-dim);
    font-size: 0.85rem;
}
.home-footer__lang select {
    background: rgba(255, 255, 255, 0.06);
    color: var(--fg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font: inherit;
    cursor: pointer;
}
.home-footer__lang select:hover { border-color: rgba(255, 255, 255, 0.3); }
/* the open dropdown list is native-themed (white popup), so force a
   readable dark-on-white for the options instead of the light --fg */
.home-footer__lang option { color: #161b24; background: #fff; }

@media (max-width: 860px) {
    /* stack the brand block above the link columns; the columns stay a
       single 3-up row (≥561px) so there are no half-empty grid cells.
       :not(__bar-inner) — the bottom bar reuses .home-footer__wrap only for
       width/centering and must keep its own (small) vertical padding + gap. */
    .home-footer__wrap:not(.home-footer__bar-inner) {
        grid-template-columns: 1fr;
        gap: clamp(28px, 6vw, 40px);
        padding-top: clamp(40px, 7vh, 64px);
    }
}
@media (max-width: 560px) {
    /* phones: one clean vertical stack — 3-up would leave a tall hole under
       the single-item Solutions column, which read as "strange + big gaps" */
    .home-footer__cols { grid-template-columns: 1fr; gap: 28px; }
    .home-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
}