/* ==========================================================================
   Footer - Figma node 7129:295.

   Brand blue, white type, and the site's own name drawn faintly across the
   whole width behind it. Three layers inside .site-footer:

     .site-footer__overlay  the wall of type, full-bleed, behind everything
     .site-footer__top      brand lockup left, menu + organisation columns right
     .footer-meta           contact strip left, copyright right

   The previous version of this footer was a white panel; the structure is the
   same, what changed is the ground it stands on - which is why almost every
   colour here is an --c-on-dark-* step rather than an ink one.
   ========================================================================== */

.site-footer {
  position: relative;
  /* The wall of type is sized to the footer's own width, and a rounding error
     in either direction must not be allowed to widen the page. */
  overflow: hidden;
  background: var(--c-primary);
  color: var(--c-on-dark);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-lg);
}

/* --- The wall of type ------------------------------------------------------
   Full-bleed as a box (it hangs off .site-footer rather than living inside
   .site-footer__inner), but capped and centred to the same width as the
   container below it - `main.js` measures whatever `clientWidth` this rule
   leaves it, so capping it here is enough for the script to fit the text to
   the container instead of the raw viewport on very wide screens. --fs-footer-
   overlay (8vw, which is the design's own 153.5px at 1920) is what it falls
   back to with JavaScript off, and what the script measures from.

   `bottom` here is the no-JavaScript fallback only - a guess, in `em` so it
   scales with the overlay's own font size. With JavaScript on, main.js reads
   where [data-footer-meta] actually sits and writes an exact `bottom: Npx`
   over it, because the true distance depends on how tall the brand row above
   turns out to be - which changes with the language, with how many
   organisations are listed, with whatever width the columns wrap at - and no
   fixed em ever tracks all of that. An inline style always beats a stylesheet
   rule regardless of specificity, so the fallback is simply never read once
   the script has run. */
.site-footer__overlay {
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-inline: auto;
  bottom: 0.215em;
  margin-block: 0;
  font-family: var(--font-wordmark);
  font-weight: var(--fw-bold);
  font-size: var(--fs-footer-overlay);
  line-height: 1;
  letter-spacing: var(--ls-nav);
  white-space: nowrap;
  /* Painted into the glyphs, brightest at their feet and gone by their tops.
     -webkit- prefix included: Safari still wants it for background-clip. */
  background-image: var(--overlay-fade);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

/* --- Top row ------------------------------------------------------------- */
.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

.site-footer__brand {
  flex: none;
  max-width: 100%;
}

.site-footer__brand .brand__title {
  color: var(--c-on-dark);
}

.site-footer__brand .brand__sub {
  color: var(--c-on-dark-muted);
}

/* --- The two link columns ------------------------------------------------ */
.site-footer__cols {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl) clamp(var(--space-2xl), 8.85vw, 170px);
  width: 100%;

  @media (min-width: 600px) {
    flex-direction: row;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 100%;

  @media (min-width: 600px) {
    width: 273px;
  }
}

/* The hairline under a column heading and between organisation rows fades out
   to the right in this design, and a border cannot hold a gradient - so it is
   a background pinned to the bottom edge one pixel tall. Only the line is
   shared; how far each of the two sits above it is their own business. */
.footer-col__title,
.footer-org:not(:last-child) {
  background-image: var(--divider-fade);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
}

/* "Về GME" - the heading over the menu column. */
.footer-col__title {
  padding-bottom: var(--space-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-contact);
  color: var(--c-on-dark-soft);
}

/* --- Menu column --------------------------------------------------------- */
.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav__list a {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-contact);
  color: var(--c-on-dark);
  transition: opacity var(--dur) var(--ease);
}

/* Dimming, not a colour change: there is no second brand colour that reads on
   blue, and the header bar marks its current link the same way. */
.footer-nav__list a:hover,
.footer-nav__list .current-menu-item > a { opacity: 0.7; }

/* --- Organisation column -------------------------------------------------
   Role over name, each pair ruled off by the same fading hairline as the menu
   heading - so the two columns share one horizontal rhythm. */
.footer-orgs {
  gap: 0;
}

.footer-org {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
}

.footer-org:first-child { padding-top: 0; }

.footer-org__label {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-contact);
  color: var(--c-on-dark-soft);
}

.footer-org__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  text-transform: capitalize;
  color: var(--c-on-dark);
  transition: opacity var(--dur) var(--ease);
}

a.footer-org__name:hover { opacity: 0.7; }

/* --- Contact strip + copyright ------------------------------------------- */
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--c-divider-on-dark);
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-contact);
  color: var(--c-on-dark-soft);
}

.footer-contact a { transition: opacity var(--dur) var(--ease); }
.footer-contact a:hover { opacity: 0.7; }

/* A shared 24px cell so the three glyphs - which are different sizes - all
   sit the same distance from their label. */
.footer-contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
}

.footer-copy {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-copy);
  line-height: var(--lh-copy);
  color: var(--c-on-dark-soft);
}

/* --- Phone: Figma node 5907:945 ---------------------------------------------
   Everything is one left-aligned column except the lockup. The menu runs in
   two columns, the fading hairlines give way to plain rules (one under the
   menu, one over the contacts), and the wall of type comes back as a single
   line behind the copyright. The side padding is the design's 6px - the
   column really does run that close to the edge there. */
@media (max-width: 767px) {
  .site-footer {
    border-top: 1px solid var(--c-border-soft);
  }

  .site-footer__inner {
    gap: var(--space-sm);
    padding: var(--space-3xl) var(--gutter) 0;
  }

  .site-footer__brand .brand--lg {
    --brand-title: var(--fs-brand-title-sm);
    --brand-sub: var(--fs-brand-sub-sm);
    --brand-leading: var(--lh-brand-sm);

    gap: var(--space-md);
  }

  .site-footer__brand .brand--lg .brand__mark {
    width: var(--brand-mark-sm);
    height: var(--brand-mark-sm);
  }

  .site-footer__top {
    align-items: stretch;
  }

  .site-footer__brand {
    align-self: center;
  }

  .site-footer__cols {
    flex-direction: column;
    gap: 20px;
  }

  .footer-col {
    width: 100%;
  }

  .footer-col__title,
  .footer-org:not(:last-child) {
    background-image: none;
  }

  .footer-col__title {
    padding-bottom: 0;
  }

  /* Two columns filled top to bottom, however many links the menu has. */
  .footer-nav__list {
    display: block;
    font-size: var(--fs-sm); /* sizes the line box the links sit in, not just the links */
    columns: 2;
    column-gap: calc(var(--space-xl) * 2);
  }

  .footer-nav__list li {
    break-inside: avoid;
  }

  .footer-nav__list li {
    margin-bottom: var(--space-md);
  }

  .footer-nav__list li:last-child {
    margin-bottom: 0;
  }

  .footer-nav__list a {
    font-size: var(--fs-sm);
  }

  /* The rule between the menu and the organisations. */
  .footer-orgs {
    gap: var(--space-md);
    padding-top: 20px;
    border-top: 1px solid var(--c-divider-on-dark);
  }

  .footer-org {
    padding-block: 0;
  }

  .footer-org__label {
    font-size: var(--fs-label);
  }

  .footer-meta {
    align-items: stretch;
    gap: 35px;
    padding-top: var(--space-sm);
  }

  .footer-contact {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--fs-label);
  }

  /* The icons are cropped to their glyph at 18-20px; the design sets all three
     in a 16px cell, so they are fitted to it by width and keep their ratio. */
  .footer-contact__icon {
    width: 16px;
    height: 16px;
  }

  .footer-contact__icon img {
    width: 16px;
    height: auto;
  }

  .footer-contact a[href^="mailto:"] {
    text-decoration: underline;
  }

  /* A 44px bar the wall of type sits behind, bottom-aligned to it. */
  .footer-copy {
    padding-block: var(--space-sm);
    font-size: var(--fs-micro);
    line-height: 20px;
    text-align: center;
    color: var(--c-on-dark);
  }

  /* One line of type at the width of the content, a fixed distance from the
     bottom: main.js lets go of the vertical placement at this width, since the
     contact strip is not what it hangs off here. */
  .site-footer__overlay {
    inset-inline: var(--gutter);
    bottom: 28px;
  }
}

/* --- Desktop: the two rows spread out ------------------------------------ */
@media (min-width: 1024px) {
  .site-footer__top,
  .footer-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer__cols {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .footer-contact { justify-content: flex-start; }
}