/* ==========================================================================
   KOBIL — Footer (Figma: footer/desktop 5833:29923, footer/mobile 5997:99974
   — Aug 2026 redesign: dark navy-900 surface, replaces the previous white
   footer entirely)
   ========================================================================== */

/* Outer element: dark surface capped at the same 1440px Figma frame width as
   the hero (--page-max, i.e. `.page`), centered past that instead of bleeding
   to the viewport edges. It sits outside .page (see build.py), so the cap
   lives here rather than being inherited. */
.site-footer {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--navy-900);
}

/* Inner content: fills the capped surface, 80px side inset per Figma. */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--w65);
  padding: var(--w64) var(--w80);
}

.site-footer__midjourney {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__divider {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---- Top: Logo + Columns ---- */

.site-footer__top {
  display: flex;
  /* stretch (not flex-start): the brand column is `self-stretch` in Figma
     (6921:46787) so its language switcher can sit on the row's bottom edge,
     level with the CTA. */
  align-items: stretch;
  gap: var(--w222);
  width: 100%;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--w20);
  flex: 0 0 auto;
}

/* Logo + tagline stay glued together at the column's top; the switcher is
   pushed to the bottom by the space-between above. */
.site-footer__brand-head {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
}

.site-footer__logo {
  display: inline-block;
  border-radius: var(--w4);
}

.site-footer__logo img {
  width: var(--w106);
  height: auto;
}

.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: var(--w14);
  line-height: var(--w20);
  text-transform: uppercase;
  color: var(--blue-light);
}

.site-footer__context {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--w70);
}

/* ---- Link Columns ---- */

.site-footer__menu {
  display: flex;
  align-items: flex-start;
  gap: var(--w60);
  width: 100%;
}

.site-footer__col--company {
  width: var(--w76);
  flex: 0 0 auto;
}

/* Just wide enough for "Digital Workplace SuperApp" to break as
   "Digital Workplace / SuperApp" rather than one word per line. Held to
   within a few px of the 111px it was when the column held nothing but
   its own title: the five columns plus their 60px gaps already fill the
   row edge-to-edge at exactly 1440, so every px added here eats into the
   last column's right margin. */
.site-footer__col--superapp {
  width: var(--w116);
  flex: 0 0 auto;
}

/* Footer links are nowrap by default — every other one is a short label
   that would look wrong broken over two lines. "Digital Workplace
   SuperApp" is the exception: left nowrap it overruns the column and
   shoves the last column off the right edge. */
.site-footer__col--superapp .site-footer__link {
  white-space: normal;
}

/* Same story as --superapp: "Caree Trusted Social Media" left nowrap is 174px
   wide, which overruns its column and shoves the last column past the right
   edge (that was the source of the horizontal scroll every page picked up
   between ~1100 and 1440). Wrapped over two lines it fits the row again. */
.site-footer__col--inside-kobil {
  width: var(--w116);
  flex: 0 0 auto;
}

.site-footer__col--inside-kobil .site-footer__link {
  white-space: normal;
}

/* Only the Inside KOBIL column has a page of its own behind its heading. */
.site-footer__col-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a.site-footer__col-title-link:hover,
a.site-footer__col-title-link:focus-visible {
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__col-title {
  margin-bottom: var(--w20);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--white);
  white-space: nowrap;
}

/* Accordion toggle: visible only on mobile */
.site-footer__col-toggle {
  display: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.site-footer__col-toggle img {
  display: block;
  width: var(--w18);
  height: var(--w18);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

.site-footer__list li {
  display: flex;
}

.site-footer__link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

a.site-footer__link:hover,
a.site-footer__link:focus-visible {
  color: var(--white);
}

.site-footer__link[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
}

/* ---- Bottom row: CTA, Contact, Social ---- */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w24);
  width: 100%;
}

.site-footer__actions {
  display: flex;
  align-items: center;
  gap: var(--w60);
}

/* ---- Language switcher (Figma: desktop 6921:46678, mobile 6940:47239) ----
   Two instances, the same way partials/header.html carries a desktop and a
   mobile one: on desktop it belongs to the brand column, on mobile it rides
   the CTA row, and those are different DOM subtrees. `js/sections/header.js`
   drives every [data-lang] on the page, so both are live. */

.site-footer__lang {
  display: flex;
  align-items: center;
  gap: var(--w8);
}

.site-footer__lang-option,
.site-footer__lang-sep {
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--white);
}

/* Figma marks the inactive locale with 60% white — a colour change, not the
   weight change the header switcher uses. */
.site-footer__lang-option:not(.is-active) {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__lang-option:hover,
.site-footer__lang-option:focus-visible {
  color: var(--blue-light);
}

.site-footer__lang--mobile {
  display: none;
}

.site-footer__cta-row {
  display: flex;
  align-items: center;
}

/* CTA "Get in touch" — white-bordered outline pill (Figma: 5833:29690) */

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  border: 1px solid var(--white);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--white);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.site-footer__cta:hover {
  background: rgba(255, 255, 255, 0.1);
}

.site-footer__cta img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.site-footer__cta:hover img {
  transform: translateX(3px);
}

/* Contact */

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: var(--w24);
}

.site-footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.site-footer__contact-item:hover,
.site-footer__contact-item:focus-visible {
  color: var(--white);
}

/* Icons carry width/height attributes for layout stability, but those are
   fixed px — sized here so they ride the same ramp as the text they sit
   next to (below 768 every --wN is remapped onto the phone ramp, see
   css/fluid.css, so one rule covers both breakpoints). */
.site-footer__contact-item img {
  flex: 0 0 auto;
  width: var(--w18);
  height: var(--w18);
}

/* Social */

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--w11);
}

.site-footer__social-link {
  display: inline-flex;
  border-radius: var(--w4);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  opacity: 0.65;
}

.site-footer__social-link img {
  width: var(--w24);
  height: var(--w24);
}

/* ---- Legal row ----
   Figma desktop (5833:29712) is one 28px-tall row: brand tagline at the left
   edge, the "Engineered in Germany" lockup next, copyright + links flush
   right. Its fixed 137px/217px gaps add up to exactly the 1280px content
   width, so anything rendering a few px wider than the design — the German
   legal labels, or just a font falling back — used to overflow the row. It
   wrapped instead, dropping the lockup onto a line of its own. Only the first
   gap is fixed here; the second one is the leftover space (`margin-left:auto`
   on the privacy block), which lands the lockup on its Figma x-position at
   1440 and then absorbs the difference instead of wrapping. Source order is
   the phone one, hence the `order` values. */

.site-footer__legal {
  display: flex;
  align-items: flex-end;
  gap: var(--w137);
  min-height: var(--w28);
  width: 100%;
}

.site-footer__brand-tagline {
  order: 1;
  font-family: var(--font-sans);
  font-size: var(--w12);
  font-weight: 400;
  line-height: var(--w18);
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.site-footer__brand-tagline-accent {
  color: var(--blue-light);
}

.site-footer__made {
  order: 2;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.site-footer__flag {
  width: var(--w5);
  height: var(--w28);
  background: linear-gradient(
    180deg,
    #000 0%,
    #000 33.33%,
    #da0300 33.33%,
    #da0300 66.66%,
    #fccb02 66.66%,
    #fccb02 100%
  );
}

/* Figma ships this lockup as a flattened 92x27.5 image with tight leading.
   Rebuilt as live text, both metrics have to ride the same ramp: a fixed
   14.5px font-size against a fluid line-height meant the line box shrank
   below the glyphs as the viewport narrowed and the two lines overlapped.
   14/14 puts the two lines at the design's 28px, matching the flag beside
   them. */
.site-footer__made-text {
  margin-left: var(--w5);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w14);
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.site-footer__made-text strong {
  font-weight: 700;
  color: var(--white);
}

.site-footer__privacy {
  order: 3;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w12);
  font-weight: 400;
  line-height: var(--w18);
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__copyright {
  white-space: nowrap;
}

.site-footer__privacy-links {
  display: flex;
  align-items: center;
  gap: var(--w7);
  white-space: nowrap;
}

.site-footer__privacy-links a {
  transition: color 0.2s var(--ease);
}

.site-footer__privacy-links a:hover,
.site-footer__privacy-links a:focus-visible {
  color: var(--white);
}


/* ==========================================================================
   Phone layout — Figma "footer/mobile" (6149:70096, component 5997:99974)
   ==========================================================================
   One breakpoint, not two: the 393 phone frame is scaled proportionally
   across the whole ≤768 range (--mN is generated for exactly that ramp, and
   inside this same query build.py remaps every --wN onto it — see the
   generated css/fluid.css). Below 768 this is the mobile design, from 769 up
   the desktop one.

   This replaces an earlier split where the real mobile design only started at
   480 and 481–768 got a handful of patches on top of the desktop layout —
   which is what rendered as desktop-structured-but-phone-sized in between:
   link columns in a 2-up grid instead of accordions, the legal block
   left-aligned in a column, and a legal separator hidden by a rule meant for
   the wrapped phone row.

   Numbers that are identical in both frames (the flag, the lockup text, the
   18/24px icons, the 24px contact gap) are deliberately not repeated here —
   the --wN remap already lands them on the phone value. */

@media (max-width: 768px) {
  .site-footer__inner {
    padding: var(--m32) var(--m24) var(--m24);
    gap: var(--m48);
  }

  .site-footer__midjourney {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  /* Figma groups the note with its rule 32px apart inside the 48px column */
  .site-footer__divider--top {
    margin-top: calc(var(--m32) - var(--m48));
  }

  /* ---- Brand + columns stack ---- */

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m48);
  }

  .site-footer__brand-head {
    gap: var(--m12);
  }

  .site-footer__logo img {
    width: var(--m116);
  }

  .site-footer__tagline {
    font-size: var(--m12);
  }

  .site-footer__context {
    width: 100%;
    gap: var(--m48);
  }

  /* ---- Link columns become accordion rows ---- */

  .site-footer__menu {
    flex-direction: column;
    gap: var(--m32);
  }

  .site-footer__col,
  .site-footer__col--company,
  .site-footer__col--superapp,
  .site-footer__col--inside-kobil {
    width: 100%;
  }

  .site-footer__col-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m12);
    margin-bottom: 0;
    font-family: var(--font-ui);
    font-weight: 700;
    line-height: var(--m16);
  }

  .site-footer__col-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* Whole title row is the tap target, not just the chevron */
  .site-footer__col-toggle::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--m10)) 0;
  }

  /* …except the heading link itself, which has to stay reachable: it sits
     above that overlay, so tapping the words opens the page and tapping
     anywhere else in the row still toggles the column. */
  .site-footer__col-title-link {
    position: relative;
    z-index: 1;
  }

  .site-footer__col-toggle img {
    transition: transform var(--dur) var(--ease);
  }

  .site-footer__col.is-open .site-footer__col-toggle img {
    transform: rotate(180deg);
  }

  .site-footer__list {
    display: none;
    margin-top: var(--m20);
    gap: var(--m12);
  }

  .site-footer__col.is-open .site-footer__list {
    display: flex;
  }

  .site-footer__link {
    font-family: var(--font-ui);
    line-height: var(--m16);
    white-space: normal;
  }

  /* ---- CTA, contact, social ---- */

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m48);
  }

  .site-footer__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m48);
    width: 100%;
  }

  .site-footer__cta {
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    gap: var(--m8);
    font-size: var(--m14);
    line-height: var(--m18);
  }

  /* Figma 6940:47348 — CTA and switcher share one full-width row */
  .site-footer__cta-row {
    width: 100%;
    justify-content: space-between;
  }

  .site-footer__lang--desktop {
    display: none;
  }

  .site-footer__lang--mobile {
    display: flex;
    gap: var(--m8);
  }

  .site-footer__lang-option,
  .site-footer__lang-sep {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .site-footer__contact-item {
    gap: var(--m6);
  }

  .site-footer__social {
    width: 100%;
    justify-content: center;
    gap: var(--m20);
  }

  /* Phone frame orders these LinkedIn, Instagram, Medium, YouTube — the
     desktop row leads with Instagram. All four need a value: leaving the last
     two at the default 0 floats them ahead of the reordered pair. */
  .site-footer__social-link:nth-child(1) {
    order: 2;
  }

  .site-footer__social-link:nth-child(2) {
    order: 1;
  }

  .site-footer__social-link:nth-child(3) {
    order: 3;
  }

  .site-footer__social-link:nth-child(4) {
    order: 4;
  }

  /* ---- Legal: centered stack ----
     lockup · rule · brand tagline · copyright · links, i.e. source order, so
     the desktop `order` values are reset. The rule is the tagline's top
     border: the desktop <hr> sits above this block in the DOM, and the phone
     frame wants it below the lockup. */

  .site-footer__divider--legal {
    display: none;
  }

  .site-footer__legal {
    flex-direction: column;
    align-items: center;
    gap: var(--m31);
  }

  .site-footer__made,
  .site-footer__brand-tagline,
  .site-footer__privacy {
    order: 0;
  }

  /* 31px column gap + 23px = the 54px the frame puts under the lockup */
  .site-footer__made {
    margin-bottom: var(--m23);
  }

  .site-footer__brand-tagline {
    width: 100%;
    padding-top: var(--m31);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    white-space: normal;
    text-align: center;
  }

  .site-footer__privacy {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--m24);
  }

  .site-footer__copyright {
    line-height: var(--m16);
    white-space: normal;
    text-align: center;
  }

  .site-footer__privacy-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--m7);
    line-height: var(--m24);
    white-space: normal;
    text-align: center;
  }

  /* The phone frame breaks this row after "Imprint & Disclaimer" and carries
     no separator onto the second line. Forcing the break on the third link,
     rather than letting it fall wherever the text runs out, keeps that shape
     in German too: those labels are ~35% longer, and a free wrap stranded a
     "|" at the end of a line. */
  .site-footer__privacy-links > a:nth-of-type(3) {
    flex-basis: 100%;
  }

  .site-footer__privacy-links > span:nth-of-type(2) {
    display: none;
  }
}