/* ==============================================================================
   SITE FOOTER
   ============================================================================== */

/* The footer is a band of the same slate as the header (Juan, 13
   October 2026), so the page sits between two bars of one colour. The
   text and its links take the chrome's off-white, 5.1:1 in light and
   7.7:1 in dark (tokens.css); the band's own colour already separates it
   from the page, so the border it had on the aqua went. The focus ring
   changes for the same reason as in the header. */
.site-footer {
  --focus-ring: var(--chrome-focus-ring);

  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  text-align: center;
  background: var(--chrome-bg);
  color: var(--chrome-text);
}

/* The links are the text itself with an underline, not the violet of the
   content, which would sink into the slate. */
.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The theme and skin switcher (prefs.css) lives in the footer, so its
   buttons now sit on the slate. Their edge takes the band's muted text:
   the lilac --border-light gave the dark chips 2.4:1 against the deep
   slate, this one 6.1:1 (4.6:1 in light, where the paper chip already
   stands out at 4.8:1). The hover was a translucent violet, which over
   the slate left the chip's text at 1.3:1; it becomes the opaque
   secondary paper, 5.4:1 light and 7.5:1 dark with that text. The
   current chip keeps the accent border from prefs.css, which loads
   later and wins the tie: violet on its paper in light, aqua (6.8:1 on
   the band) in dark. */
.site-footer .prefs__btn {
  border-color: var(--action-bar-text-muted);
}

.site-footer .prefs__btn:hover {
  background: var(--paper-secondary-bg);
}

/* The preferences and the language switcher are one row of controls
   above the contact lines, and wrap onto two centred rows when they do
   not fit side by side (any phone). The row carries the gap below it that
   .prefs had on its own (prefs.css), so .prefs drops its margin here. */
.site-footer__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.site-footer__controls .prefs {
  margin-bottom: 0;
}

/* The language switcher reads as a line of text, "Español · English", not
   as buttons: the other language is an underlined link like every footer
   link, the current one is bold and not underlined, so the state shows in
   weight and decoration and not in colour alone. Everything takes the
   band's --chrome-text (5.1:1 light, 7.7:1 dark). The padding, background
   and capitals reset what header.css gave the switcher while it lived in
   the header, so the footer's look does not depend on those rules being
   gone. */
.site-footer .lang-switch {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
}

.site-footer .lang-switch__link {
  padding: 0;
  background: none;
  color: var(--chrome-text);
  font-size: 0.9rem;
  text-transform: none;
  text-decoration: underline;
}

.site-footer .lang-switch__link:hover {
  background: none;
  text-decoration-thickness: 2px;
}

.site-footer .lang-switch__link.is-current {
  background: none;
  font-weight: 700;
  text-decoration: none;
}

/* The same narrower side padding .page takes on phones (page.css): it is
   what lets the email below fit on one line in a 320px viewport, instead
   of wrapping its last letter alone. */
@media (max-width: 480px) {
  .site-footer {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

.site-footer__contact,
.site-footer__social {
  margin: 0 0 var(--spacing-xs);
}

/* The address is one long word with no break opportunity: at a larger
   font size than the default it is still wider than a phone's text
   column, and letting it wrap anywhere keeps the page from scrolling
   sideways there. */
.site-footer__email,
.site-footer__instagram {
  overflow-wrap: anywhere;
}

/* The Instagram mark sits on the text line at the size of the letters
   around it. The -0.15em drop centres it on the x-height instead of the
   baseline, and fill takes currentColor so it follows the link colour in
   every skin and theme, the footer's off-white included, without a
   colour of its own to measure. */
.site-footer__icon {
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  vertical-align: -0.15em;
  fill: currentColor;
}

/* ------------------------------------------------------------------------------
   SIGNATURE
   The footer closes with the Assembly's logo and its name, one link to the
   home page like the header's (partials/footer.html): the way an
   organisation signs, not a company, so no copyright line (Juan, 14
   October 2026), and since the same day no line of who we are under the
   name either. A thin rule above it separates the signature from the
   contact lines; --border-light is the lilac of the content's borders,
   faded to 40 % so it reads as a hairline on the slate rather than a
   stripe.
   ------------------------------------------------------------------------------ */
.site-footer__signature {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid color-mix(in srgb, var(--border-light) 40%, transparent);
}

/* The link stacks the logo over the name, centred. It is a signature,
   not a line of text, so it drops the underline every other footer link
   has (.site-footer a, one class lighter than this selector) and only
   the name takes it on hover and keyboard focus, below. The focus ring
   is the global :focus-visible one, which takes the footer's
   --chrome-focus-ring; the radius rounds it around the block instead of
   leaving a hard box over the disc. */
.site-footer .site-footer__home {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-md);
  text-decoration: none;
}

/* The underline goes on the name only: drawn on the link it would sit
   under the logo's box too, and the disc is not text. */
.site-footer__home:hover .site-footer__org,
.site-footer__home:focus-visible .site-footer__org {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The file is 150 px and carries width/height for the layout to reserve
   its box; it is drawn at 3rem, twice the header's mark, with a 2 px ring
   in the band's text colour so the disc stands off the slate. object-fit
   keeps it round should the original that replaces it come square. */
.site-footer__mark {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--chrome-text);
  border-radius: 50%;
  object-fit: cover;
}

/* The name is lettered like the header's (ADR-034): the hand font in
   capitals at its only weight. It is a span inside the link, so it takes
   the band's --chrome-text through the link's inherited colour. */
.site-footer__org {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}