/* ============================================================================
   JT FOOTER MODULE — v1.1.0
   FROZEN. Link this file; do not copy it into a page and do not edit it to
   suit one page. The footer is identical on every page — it has no per-page
   state at all (unlike the menu, whose current item varies).

   Transcribed from the Figma `footer` COMPONENT on Page 1 (1920x312).
   Colours, sizes, spacing and letter-spacing below are the measured values,
   not eyeballed approximations.

   Self-contained, like every module here: it owns its custom properties and
   its media queries, and requires nothing from the host page's stylesheet.
   All custom properties are --jt- prefixed so they cannot collide with page
   CSS.
   ========================================================================== */

:root {
  /* --- palette (measured from the Figma `footer` component) -------------- */
  --jt-footer-rule:        rgba(125, 211, 252, 0.14);   /* both rules, same weight */

  --jt-footer-brand:       #eb8b2d;   /* logo, badges */
  --jt-footer-heading:     #00d4ff;   /* column titles */
  --jt-footer-link:        #8fa2b6;   /* column links */
  --jt-footer-muted:       #6f8296;   /* mission, pending items */
  --jt-footer-badge-bg:     rgba(235, 139, 45, 0.10);
  --jt-footer-badge-border: rgba(235, 139, 45, 0.28);

  /* Figma uses a 2px corner on the social chips and the SOON badge. */
  --jt-footer-radius:      2px;

  /* --- social link: the four states from the `social link` COMPONENT_SET ----
     This is a real component with State = default | hover | focus | active,
     each defining its own fill, border and glyph colour. They are transcribed
     rather than derived — an earlier version invented a single hover state,
     which is what this replaces. Every value below is measured.

     Note the default state's border: the component HAS a 1px stroke that is
     simply set invisible. Declaring it transparent here (rather than omitting
     it) is what stops the chip resizing by 2px when a border appears on
     hover. */
  --jt-social-bg:            rgba(122, 224, 244, 0.07);
  --jt-social-border:        transparent;
  --jt-social-icon:          #8296aa;
  --jt-social-radius:        3px;

  /* hover and focus are now IDENTICAL in the component — same fill, border and
     glow. They were different before (focus had a white fill and a weaker
     border); the design has since converged them. Kept as separate tokens so
     they can diverge again without touching the rules. */
  --jt-social-bg-hover:      rgba(0, 212, 255, 0.13);
  --jt-social-border-hover:  rgba(0, 212, 255, 0.75);
  --jt-social-glow-hover:    0 0 9px rgba(0, 212, 255, 0.25);
  --jt-social-icon-hover:    #7dd3fc;

  --jt-social-bg-focus:      rgba(0, 212, 255, 0.13);
  --jt-social-border-focus:  rgba(0, 212, 255, 0.75);
  --jt-social-glow-focus:    0 0 9px rgba(0, 212, 255, 0.25);
  --jt-social-icon-focus:    #7dd3fc;

  --jt-social-bg-active:     rgba(0, 212, 255, 0.18);
  --jt-social-border-active: rgba(0, 212, 255, 0.45);
  --jt-social-icon-active:   #bfe6fa;

  /* The corner is 3px at rest and when pressed, but 2px while hovered or
     focused. That 1px difference is what the component says; it is small
     enough to look like an oversight, so it is transcribed rather than
     smoothed — and flagged in MODULE.md. */
  --jt-social-radius-hover:  2px;

  /* Text-link interaction colours.
     CAVEAT: the footer's TEXT links are plain text nodes in Figma, not
     component instances — unlike the social links, the design specifies no
     states for them. Rather than invent a colour, these reuse the tokens the
     `social link` component does define for the same interactions, so the
     whole footer responds in one visual language. If a `footer link`
     component is ever added to the design system, replace these with its
     measured values. */
  --jt-footer-hover:       #7dd3fc;   /* = social link hover glyph */
  --jt-footer-pressed:     #bfe6fa;   /* = social link active glyph */
  --jt-footer-focus-ring:  #00d4ff;

  /* --- type ------------------------------------------------------------
     Two families, both from Google Fonts. The PAGE must load them (see
     MODULE.md); the module declares fallbacks so it degrades to a sane
     stack rather than to Times if they're missing. */
  --jt-footer-display: "Tektur", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --jt-footer-body:    "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- layout ----------------------------------------------------------
     Figma: 1920 frame, 160px side padding, so 1600 of content. Below that
     the padding shrinks rather than the content being cropped. */
  --jt-footer-max:     1600px;
  --jt-footer-gutter:  24px;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.jt-footer {
  /* Sits above the ambient glows and the parallax stage. The background
     module's stage is z-index:-1 and the glows are z-index:0, so any
     positioned element paints above them. */
  position: relative;
  z-index: 1;

  /* The rebuilt page frames give the footer component its own top padding of
     120 and stack it with a zero gap, so the space above it is the footer's
     rather than a margin it hopes the page leaves. Height went 235 → 355 with
     it. Set --jt-footer-space to change it per page. */
  --jt-footer-space: clamp(64px, 6.25vw, 120px);
  margin-block-start: 0;
  padding-block-start: var(--jt-footer-space);
  padding-inline: var(--jt-footer-gutter);
  padding-block-end: 64px;       /* Figma: bottom padding 64 (was 40) */

  font-family: var(--jt-footer-body);
  font-size: 13px;
  font-weight: 300;              /* Figma: Exo 2 Light */
  line-height: normal;           /* Figma Body/Caption uses AUTO leading */
  color: var(--jt-footer-link);

  /* Deliberately transparent: the parallax background shows through, which
     is the whole point of the scene continuing to the bottom of the page. */
  background: transparent;
}

.jt-footer__inner {
  max-width: var(--jt-footer-max);
  margin-inline: auto;
}

/* One rule, opening the footer. The second (which separated the legal line)
   went with that row. */
.jt-footer__rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--jt-footer-rule);
}

/* ==========================================================================
   Main row — brand block + three link columns
   Figma widths: 430 / 300 / 300 / 300 with 90px gaps, inside 1600.
   Expressed as a grid so the proportions hold at any width without the
   fixed pixel positions from the comp.
   ========================================================================== */

.jt-footer__main {
  display: grid;
  grid-template-columns: 430fr 300fr 300fr 300fr;
  gap: 40px;
  padding-block-start: 48px;
}

/* --- brand block ---------------------------------------------------------- */

.jt-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The wordmark is an <a> to the language homepage, so it needs the anchor
   resets: `inline-block` to keep it a block-level box the way the <p> it
   replaced was (the mission's 8px top margin sits against it), and
   `text-decoration: none` because the footer's link default is underlined. */
.jt-footer__logo {
  display: inline-block;
  margin: 0;
  font-family: var(--jt-footer-display);
  font-size: 18px;
  font-weight: 700;              /* Figma: Tektur Bold */
  letter-spacing: 3px;
  color: var(--jt-footer-brand);
  text-decoration: none;
}

/* Same treatment as the menu's brand lockup (menu.css, section 3): an orange
   glow rather than a colour change or an underline. The value is repeated
   rather than shared because each module owns its own properties and neither
   may read the other's — see modules/menu/menu.css `.jt-menu__brand`.

   The alpha is HIGHER than the menu's 0.5 on purpose: down here the wordmark
   sits over the parallax starfield rather than the bar's blurred panel, and
   the menu's value reads as almost nothing against it.
   Focus needs nothing here — `.jt-footer a:focus-visible` already rings every
   link in the footer, and this is now one of them. */
.jt-footer__logo:hover {
  filter: drop-shadow(0 0 5px rgba(235, 139, 45, .75));
}

.jt-footer__mission {
  margin: 8px 0 0;               /* Figma: 8px below the logo */
  max-width: 380px;
  color: var(--jt-footer-muted);
  line-height: normal;
}

/* --- social chips --------------------------------------------------------- */

.jt-footer__social {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The four states of the `social link` component, in the order CSS needs them:
   default, hover, focus, active. `:active` comes last so a press wins over a
   hover, matching how the component is meant to read.

   box-sizing is set explicitly rather than inherited: the module can't assume
   the host page has a border-box reset, and without it the 1px border would
   push the chip to 36x36. */
.jt-footer__social a {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--jt-social-border);
  border-radius: var(--jt-social-radius);
  background: var(--jt-social-bg);
  color: var(--jt-social-icon);
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease, box-shadow 160ms ease, border-radius 160ms ease;
}

/* Line-art icons, matching the design's house style — stroked, not filled.
   `fill: none` and the stroke width live here rather than in the markup so
   all three icons stay consistent. The stroke uses currentColor, so each
   state below only has to set `color` and the glyph follows. */
.jt-footer__social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke-width: 1;
}

.jt-footer__social a:hover {
  background: var(--jt-social-bg-hover);
  border-color: var(--jt-social-border-hover);
  border-radius: var(--jt-social-radius-hover);
  color: var(--jt-social-icon-hover);
  box-shadow: var(--jt-social-glow-hover);
}

/* :focus-visible, not :focus — the component's focus state is the
   keyboard-navigation treatment, and showing that ring after a mouse click
   is noise. The design gives it its own fill, border and outer glow, so this
   element opts out of the footer's generic focus outline (see below). */
.jt-footer__social a:focus-visible {
  background: var(--jt-social-bg-focus);
  border-color: var(--jt-social-border-focus);
  border-radius: var(--jt-social-radius-hover);
  color: var(--jt-social-icon-focus);
  box-shadow: var(--jt-social-glow-focus);
  outline: none;
}

.jt-footer__social a:active {
  background: var(--jt-social-bg-active);
  border-color: var(--jt-social-border-active);
  border-radius: var(--jt-social-radius);
  color: var(--jt-social-icon-active);
  box-shadow: none;
}

/* --- link columns --------------------------------------------------------- */

.jt-footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;                     /* Figma: 20px title -> list */
}

.jt-footer__col-title {
  margin: 0;
  font-family: var(--jt-footer-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.7px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--jt-footer-heading);
}

.jt-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;                      /* Figma: 8px between links (was 4px) */
  margin: 0;
  padding: 0;
  list-style: none;
}

.jt-footer__links a {
  color: var(--jt-footer-link);
  text-decoration: none;
  transition: color 160ms ease;
}

.jt-footer__links a:hover,
.jt-footer__links a:focus-visible {
  color: var(--jt-footer-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jt-footer__links a:active {
  color: var(--jt-footer-pressed);
}

/* An item that isn't live yet. Rendered as a <span>, never an <a> — a link
   to nowhere is worse than no link, for keyboard and screen-reader users
   alike. Dimmer than a real link so it reads as unavailable. */
.jt-footer__pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--jt-footer-muted);
}

/* Now a real COMPONENT in the design (45x16), which is where its 1px border
   came from — it had none while it was a loose frame, and it was 24px tall. */
.jt-footer__badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding-inline: 4px;
  border: 1px solid var(--jt-footer-badge-border);
  border-radius: var(--jt-footer-radius);
  background: var(--jt-footer-badge-bg);
  font-family: var(--jt-footer-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.7px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--jt-footer-brand);
}

/* Visible to screen readers only. The SOON badge communicates status through
   colour and a stylised abbreviation; this carries the same meaning as plain
   words for anyone not seeing it. Clip-based rather than display:none, which
   would remove it from the accessibility tree too. */
.jt-footer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The legal row — a second rule, the copyright, dot separators, the
   @JEDIFORMATION handle, and Privacy/Terms/Disclaimer as their own strip —
   was REMOVED from the component. Those three links now sit in the MORE
   column as ordinary links, so they need no styling of their own. Its rules
   are deleted rather than left dormant: dead CSS invites someone to
   reintroduce the markup and think it is supported. See MODULE.md. */

/* ==========================================================================
   Focus visibility
   The footer sits on a dark, animated background, so the browser default ring
   is easy to lose. This is the fallback for TEXT links; the social links have
   their own designed focus state above and opt out via `outline: none`.
   ========================================================================== */

.jt-footer a:focus-visible {
  outline: 2px solid var(--jt-footer-focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Responsive
   NOT DRAWN IN FIGMA — only the 1920 desktop frame exists. These breakpoints
   are derived, and match the background module's (768 / 1024) so the whole
   page changes at the same widths rather than at three different ones. They
   are candidates for a real comp later.
   ========================================================================== */

/* --- tablet: 2x2 grid, brand spanning the top ----------------------------- */
@media (max-width: 1023px) {
  .jt-footer__main {
    grid-template-columns: 1fr 1fr 1fr;
    padding-block-start: 40px;
  }
  .jt-footer__brand {
    grid-column: 1 / -1;
  }
  .jt-footer__mission {
    max-width: 52ch;
  }
}

/* --- phone: single column ------------------------------------------------- */
@media (max-width: 767px) {
  .jt-footer {
    padding-block-end: 32px;
  }
  .jt-footer__main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .jt-footer__logo {
    font-size: 18px;
    letter-spacing: 3px;
  }
}

/* ==========================================================================
   Reduced motion — only hover transitions to drop; the footer has no
   animation of its own.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .jt-footer a,
  .jt-footer__social a {
    transition: none;
  }
}