/* =====================================================================
   footer-big.css — shared deep-ink site footer (.home-footer).
   Loaded on every page that renders templates/base/footer-big.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-small.html it replaces — so drop the 57px reserve
   style.css keeps for that fixed footer, otherwise an empty strip shows
   below the slab.
   Sticky-footer layout: make the body a full-height flex column so that on
   short pages the footer is pushed to the bottom of the viewport (via
   margin-top:auto) instead of floating up right under the content. On tall
   pages the body grows past the viewport and the footer just follows the
   content. box-sizing:border-box (Bootstrap default) means the 100dvh already
   accounts for the fixed-navbar top padding, so nothing overflows. */
body {
    padding-bottom: 0 !important;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.home-footer { margin-top: auto; }

/* Breathing room so plain page content doesn't butt right up against the dark
   footer slab (e.g. /about-us, /privacy-policy). The home page supplies its own
   generous band spacing above the footer (.home-contact), so it's excluded via
   the html.home-js flag set in home.html. */
html:not(.home-js) #base-main { padding-bottom: clamp(40px, 6vh, 64px); }

/* 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; }
.home-footer__social-btn--ig:hover { color: #e1306c; }
.home-footer__social-btn--tg:hover { color: #229ed9; }

/* ---- link columns ---- */
.home-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
    min-width: 0;            /* let the columns block shrink inside the footer's 2fr track */
}
.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;
    overflow-wrap: anywhere;   /* long localized headings wrap, never overflow the column */
}
.home-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.home-footer__col a {
    display: 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;
    min-width: 0;
    /* `anywhere` (not `break-word`) so the long word also shrinks the link's
       intrinsic min-width — otherwise the text keeps the column wide and the
       label spills into the neighbouring column in narrow (RU/DE) layouts. */
    overflow-wrap: anywhere;
}
.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);
    font-size: 0.85rem;
}
.home-footer__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 0;
    padding: 0.25rem 0.3rem;
    color: var(--fg);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.home-footer__lang:hover { color: var(--fg-strong); }

@media (max-width: 991px) {
    /* Stack the brand block above the link columns. Done at 991 (not 860) so the
       720px content band gives the three columns the full width instead of only
       the 2fr share of a side-by-side split — that share squeezes each column to
       ~100px, where long localized labels collide. 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;
    }
}

.faqbot-toggle { bottom: 16px; }