/* The Forlais Footer, from the Forlais website source (New Website Test, forlais/ui/footer.css,
   footer-fold.scss and _phone-footer.scss, 16 Oct 2026), mapped onto this site's tokens. The
   markup is tools/generate/partials/footer.html; assets/js/shared/nav.js folds the menus at 1006px and under. */
@font-face {
  font-family: "Frl UI";
  src: url("../fonts/frl-ui-medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
.site-footer {
  --font-body: var(--font);
  --site-gutter: var(--gutter);
  --color-page: #0d0d0d;
  --color-focus: var(--focus);
  --control-focus-offset: 2px;
  margin-top: clamp(48px, 8vw, 96px);
}
/*   Owner direction (task 1158), after the Anthropic footer: calm, flat and on one grid. The
   wordmark opens the Footer; five equal columns hold the navigation and the ways to reach
   Forlais; the company record closes it. Groups flow down their column, so no column waits
   for another. Every length is a multiple of --fu: 1px at full size, shrinking in proportion
   once the content box is narrower than the composition, so nothing rearranges or wraps. */
:root {
  /* Five 196-unit columns (the widest name, Self Adapting Systematic Growth, is 193 at 14)
     and four 32-unit gaps. */
  --footer-composition: 1108;
}

.site-footer {
  container-type: inline-size;
  color: #fff;
  background: var(--color-page);
}

/* Two sizes. 14 for headings and names: headings Frl UI medium at 94% white, names Frl at 60%,
   12 for group labels, captions and legal at 50%. Over #0D0D0D: 17.1, 7.3 and 5.3:1. */
.footer-inner {
  --fu: min(1px, calc(min(var(--page-width), 100cqw - 2 * var(--site-gutter)) / var(--footer-composition)));
  --footer-strong: rgb(255 255 255 / 0.94);
  --footer-body: rgb(255 255 255 / 0.6);
  --footer-quiet: rgb(255 255 255 / 0.5);
  /* Text keeps its compact 20-unit line; actual targets have a separate 24px minimum.
     This preserves the type scale while meeting the current WCAG 2.2 AA task baseline. */
  --footer-row: calc(20 * var(--fu));
  --footer-target: max(24px, var(--footer-row));
  --footer-small: 400 calc(12 * var(--fu)) / calc(16 * var(--fu)) var(--font-body);
  --footer-group-gap: calc(24 * var(--fu));
  /* The background runs edge to edge; the content keeps the header's box, at most --page-width and centred
     (Oliver, 26 Oct 2026: the footer the same width as the top). */
  padding: calc(72 * var(--fu)) max(var(--site-gutter), (100cqw - var(--page-width)) / 2) calc(64 * var(--fu));
  color: var(--footer-body);
  font: 400 calc(14 * var(--fu)) / var(--footer-row) var(--font-body);
  white-space: nowrap;
}
.footer-inner h2 {
  margin: 0 0 calc(16 * var(--fu));
  color: var(--footer-strong);
  font: 500 calc(14 * var(--fu)) / calc(20 * var(--fu)) "Frl UI", var(--font-body);
  letter-spacing: 0;
}
.footer-inner h3 { margin: 0 0 calc(2 * var(--fu)); color: var(--footer-quiet); font: var(--footer-small); letter-spacing: 0.01em; }
.footer-inner ul { margin: 0; padding: 0; list-style: none; }

.footer-brand {
  display: block;
  width: calc(118 * var(--fu));
  height: auto;
  margin-bottom: calc(56 * var(--fu));
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: calc(32 * var(--fu));
  align-items: start;
}
.footer-navigation {
  display: grid;
  grid-column: 1 / 5;
  grid-template-columns: subgrid;
  align-items: start;
}
.footer-navigation > section,
.footer-reach { min-width: 0; }

/* A labelled group opens after a pause; an unlabelled one continues the list above it. */
.footer-navigation-group + .footer-navigation-group,
.footer-lower,
.footer-portals,
.footer-eve { margin-top: var(--footer-group-gap); }
.footer-navigation-group:not(:has(> h3)) + .footer-navigation-group:not(:has(> h3)) { margin-top: calc(10 * var(--fu)); }

/* One row per name, tight within a group. */
.footer-destination,
.footer-portal-request,
.footer-social-list :is(button, a) {
  display: block;
  width: 100%;
  min-height: var(--footer-target);
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: default;
}
.footer-destination { display: flex; align-items: center; }

.footer-portals li + li { margin-top: calc(8 * var(--fu)); }
.footer-portal-request { min-height: calc(36 * var(--fu)); }
.footer-portal-name { display: block; line-height: calc(20 * var(--fu)); }
.footer-portal-caption { display: block; color: var(--footer-quiet); font: 400 calc(12 * var(--fu)) / calc(16 * var(--fu)) var(--font-body); }

/* Last column: contact routes, then the handles. */
.footer-contact-group + .footer-contact-group { margin-top: var(--footer-group-gap); }
.footer-contact-address {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--footer-target);
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-quick, 160ms) var(--motion-ease-out, ease);
}
.footer-contact-address:hover { color: var(--footer-strong); }
.footer-contact-address:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--control-focus-offset); }
.footer-socials { margin-top: calc(36 * var(--fu)); }
.footer-social-list :is(button, a) { display: flex; align-items: center; gap: calc(10 * var(--fu)); width: fit-content; }
/* Wired destinations (8 Oct): a pointer, the name brightening and a focus ring, as the navigation links. */
:is(a.footer-portal-request, a.footer-social-link) { text-decoration: none; cursor: pointer; }
:is(a.footer-portal-request, a.footer-social-link):hover .footer-portal-name, a.footer-social-link:hover span { color: var(--footer-strong); }
:is(a.footer-portal-request, a.footer-social-link):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.footer-social-list img { width: calc(16 * var(--fu)); height: calc(16 * var(--fu)); object-fit: contain; opacity: 0.6; }

/* Closing row: the owner's Figma company record (24:647, symbol left and three lines matching
   its 45 height) on the left margin, the policy notice set right on the right margin. */
.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(48 * var(--fu));
  margin-top: calc(64 * var(--fu));
}
.footer-company { display: flex; align-items: flex-start; gap: calc(12 * var(--fu)); }
.footer-company img { width: calc(33 * var(--fu)); height: calc(45 * var(--fu)); flex: none; }
.footer-company p { margin: 0; font: 400 calc(12 * var(--fu)) / calc(15 * var(--fu)) var(--font-body); }
.footer-company-details { color: var(--footer-body); }
.footer-company-details span { display: block; }
.footer-company .footer-company-copyright { color: var(--footer-quiet); }
/* A faint underline keeps the registry link distinguishable without colour alone. */
.footer-company-number {
  color: inherit;
  text-decoration: underline 1px rgb(255 255 255 / 0.3);
  text-underline-offset: calc(3 * var(--fu));
}
.footer-company-number:hover { color: var(--footer-strong); text-decoration-color: currentColor; }
.footer-company-number:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.footer-policy-copy {
  width: calc(240 * var(--fu));
  margin: 0;
  color: var(--footer-quiet);
  /* 1.5 as a ratio, not 18 units: where the phone type raises the words to 14px, the line keeps
     its proportion (it fell to 1.29; impeccable audit, 15 Oct 2026). Unchanged at 12px. */
  font: 400 calc(12 * var(--fu)) / 1.5 var(--font-body);
  text-align: right;
  /* The designed two-line notice is the one Footer text that wraps, inside its fixed width. */
  white-space: normal;
}
.footer-policy-link {
  display: inline;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--footer-body);
  background: transparent;
  font: inherit;
  vertical-align: baseline;
  cursor: default;
}
.footer-policy-documents { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .footer-contact-address { transition: none; }
}
@media (forced-colors: active) {
  .footer-contact-address:focus-visible { outline-color: Highlight; }
}

/* A Footer name that leads somewhere (8 Oct): a link in the row's own type, brighter on hover. */
a.footer-destination { text-decoration: none; cursor: pointer; }
a.footer-destination:hover { color: var(--footer-strong); }
a.footer-destination:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--control-focus-offset); }
a.footer-policy-link { text-decoration: none; cursor: pointer; }
/* The cookie control's persistent link, on its own line under the notice (8 Oct). */
.footer-cookie-line { margin-top: calc(8 * var(--fu)); }
.footer-cookie-preferences { display: inline-flex; align-items: center; min-height: 24px; }
a.footer-policy-link:hover { text-decoration: underline; text-underline-offset: 3px; }
a.footer-policy-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--control-focus-offset); }

/* footer-fold.scss: on a wide window the menus are open columns whose headings toggle nothing. */
@media (min-width: 1006.02px) {
  .footer-fold-wide > .footer-fold-heading { display: block; list-style: none; cursor: default; pointer-events: none; }
  .footer-fold-wide > .footer-fold-heading::-webkit-details-marker { display: none; }
}
/* _phone-footer.scss rules, at 1006px and under. */
@media (max-width: 1006px) {
  .site-footer { --phone-gutter: 32px; --phone-hairline: rgb(255 255 255 / 12%); }
  .footer-inner { --fu: 1px; padding: 56px var(--site-gutter) calc(40px + env(safe-area-inset-bottom)); white-space: normal; }
  .footer-brand { width: 124px; height: auto; }
  .footer-columns { display: block; margin-top: 32px; }
  .footer-navigation { display: block; border-top: 1px solid var(--phone-hairline); }
  .footer-navigation > section { border-bottom: 1px solid var(--phone-hairline); }
  .footer-fold-heading { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; list-style: none; }
  .footer-fold-heading::-webkit-details-marker { display: none; }
  .footer-fold-heading::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
    border-right: 1.5px solid rgb(255 255 255 / 70%); border-bottom: 1.5px solid rgb(255 255 255 / 70%);
    transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--motion-ease-out, ease);
  }
  .footer-fold-heading:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
  .footer-fold-heading h2 { margin: 0; color: #fff; font: 400 19px / 1.2 var(--font-body); }
  .footer-fold[open] > .footer-fold-heading::after { transform: translateY(3px) rotate(-135deg); }
  .footer-fold[open] { padding-bottom: 20px; }
  .footer-navigation-upper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
  .footer-destination, .footer-contact-address, .footer-social-link, .footer-social-list button, .footer-portal-request, .footer-cookie-preferences { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-destination { font-size: 15px; }
  .footer-reach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; margin-top: 36px; }
  .footer-socials { margin-top: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 44px; }
  .footer-policy-copy { width: auto; text-align: left; }
  .footer-contact-address { display: flex; overflow-wrap: anywhere; }
  /* Fixes over the source, seen at 390px: a portal's caption sits under its name, not beside
     it; groups side by side in a menu start on the same line. */
  .footer-portal-request { flex-direction: column; align-items: flex-start; justify-content: center; }
  .footer-navigation-upper > .footer-navigation-group { margin-top: 0; }
}
/* At phone widths an address needs the whole measure (the source does this at 360px; at 390px
   "forlaisgroup.org" still broke mid-domain), so the contact routes take one column and the
   handles sit in two columns under them. */
@media (max-width: 480px) {
  .footer-reach { grid-template-columns: minmax(0, 1fr); }
  .footer-social-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .footer-fold-heading::after { transition: none; } }