/* =============================================================================
   Footer — docs/components/footer.md.

   The documented composition: a top row of company block / vertical nav /
   social + legal aside, a rule, the divisions row, a rule, and the centred
   legal line. The legal aside — the second copy gap left open by the 2026-09
   redesign — is now filled. The postal address stays out by the owner's
   decision (docs/redesign/edtech/copy-gaps.md).

   .footer__bottom must keep its class name — js/consent.js injects the
   "Cookie settings" button into it (injectFooterLink()), and that file's
   behaviour is frozen. It rides on the legal-links column so the injected
   button lands beside Privacy Policy.
   ============================================================================= */

.footer {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  padding-block: var(--footer-padding-top) var(--footer-padding-bottom);
  /* Dark ground, so the tone-aware focus ring (CR-006) has to flip here too.
     Only the ring token — the footer sets its own text colours, so it must not
     opt into the whole section.css tone switch. */
  --focus-ring: var(--color-accent-cyan);
}

/* Side padding comes from the .container inside, so it is not doubled here. */
.footer > .container {
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap);
}

/* ---------------------------------------------------------------------------
   Top row — company block, nav column, social + legal aside
   --------------------------------------------------------------------------- */
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--footer-gap);
}

/* ---------------------------------------------------------------------------
   Company — the logo alone, as in danubius-it-solutions' own footer. footer.md
   also puts a company title and a postal address here, but the owner asked for
   both to stay off this site; see docs/redesign/edtech/copy-gaps.md.
   --------------------------------------------------------------------------- */
.footer__company {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 320px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border-radius: var(--border-radius-sm);
}

.footer__logo-img {
  width: 150px;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Nav column — one link per line, mirroring the main nav
   --------------------------------------------------------------------------- */
.footer__nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* typographyNav — Raleway SemiBold 16px, letter-spacing 2%, uppercase */
.footer__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: 1rem;
  line-height: 140%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  transition: color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-accent);
  transform: translateX(var(--nudge));
}

/* ---------------------------------------------------------------------------
   Aside — socials at the top, legal links at the bottom of the row height
   --------------------------------------------------------------------------- */
.footer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: var(--space-6);
}

/* .footer__bottom rides along here; see the file header. */
.footer__legal-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* typographyFooterLink — 15px SemiBold, letter-spacing 1% */
.footer__legal-link {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 140%;
  letter-spacing: 0.01em;
  text-align: right;
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   Dividers
   --------------------------------------------------------------------------- */
.footer__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-white-20);
}

/* ---------------------------------------------------------------------------
   Divisions row — footer.md § Divisions section. Lora tagline over one linked
   Division card per *other* live division; an app never links to itself, so
   EdTech's own card is absent here. AI Solutions and FinTech are retired.
   --------------------------------------------------------------------------- */
.footer__divisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* typographyTaglineSmall — family and size come from .tagline-small in globals. */
.footer__divisions-tagline {
  margin-bottom: 0;
  color: var(--color-accent-cyan);
  text-align: center;
}

.footer__division-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__division {
  display: flex;
  flex: 1 0 0;
  min-width: min(300px, 100%);
}

.footer__division-link {
  display: flex;
  width: 100%;
  border-radius: var(--border-radius-lg);
}

/* The card lifts with the link, so keyboard focus gets the same feedback as hover. */
.footer__division-link:focus-visible .division-card {
  transform: var(--lift-md);
}

/* ---------------------------------------------------------------------------
   Legal line — typographyFooterLegal, centred (footer.md § Layout)
   --------------------------------------------------------------------------- */
.footer__legal {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  text-align: center;
  color: var(--color-white);
}

/* ---------------------------------------------------------------------------
   Social — footer.md § Social icon. A 32px square filled edge to edge by the
   platform's brand mark. Two artworks per platform share the same glyph
   geometry and a 25%-radius rounded-square background, so the pair cross-fades
   without shifting: `-grey` is the two-tone default, the plain file is the
   platform's own colours, revealed on hover/focus.
   --------------------------------------------------------------------------- */
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social a {
  position: relative;
  display: inline-flex;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--border-radius);
  transition: transform var(--duration-base) var(--ease-standard);
}

.footer__social a:hover,
.footer__social a:focus-visible {
  transform: var(--lift-sm);
}

.footer__social-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.footer__social-icon--brand {
  opacity: 0;
}

.footer__social a:hover .footer__social-icon--brand,
.footer__social a:focus-visible .footer__social-icon--brand {
  opacity: 1;
}

.footer__social a:hover .footer__social-icon--muted,
.footer__social a:focus-visible .footer__social-icon--muted {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   Responsive — desktop-first, 1200 / 900 / 600 only
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__company {
    max-width: none;
  }

  .footer__aside {
    align-items: flex-start;
    align-self: stretch;
  }

  .footer__legal-links {
    align-items: flex-start;
  }

  .footer__legal-link {
    padding-inline: 0;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .footer__link {
    padding-inline: 0;
  }

  .footer__division-cards {
    flex-direction: column;
  }
}