/* ---------- Scrolling content layer ---------- */
/* Sits above the fixed .footer panel and covers it until this layer has
   fully scrolled past, at which point the panel is revealed underneath. */
.page-content {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  transition: background-color 0.3s ease;
}

.footer-spacer {
  height: 100vh;
  height: 100dvh;
}

/* ---------- Footer (revealed on scroll) ---------- */
/* Background + logo colors are picked at random on load from the JAC
   palette — see js/footer.js. The defaults below are just a fallback
   in case that script fails to run. */
.footer {
  position: fixed;
  inset: 0;
  z-index: 1;

  background: var(--footer-look-bg, #0d0d0d); /* --footer-look-bg: js/footer.js, per theme */
  transition: background-color 0.3s ease;
}

/* Hidden by js/footer.js while the page is nowhere near its end. The footer
   is fixed *behind* .page-content, so pulling the page down past the top
   (elastic overscroll on macOS/iOS) slides the content away and would show
   it underneath — this keeps only the page's own background visible there. */
.footer.is-offscreen {
  visibility: hidden;
}

/* Sits in the empty space above the hook of the "J", left-aligned with the
   logo. Positioned as a fraction of the logo's width (which drives its
   height via aspect-ratio) so the gap above the "J" always matches the
   20px outer margin used by .footer-logo, at any viewport size. */
.footer-details {
  position: absolute;
  left: 20px;
  top: calc((100vw - 40px) * 0.294547);
  transform: translateY(-100%);
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 0;

  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: normal;
  transition: color 0.3s ease;
}

.footer-link {
  color: inherit;
  text-decoration: none;
}

/* The e-mail link swaps its text for "COPIED" (js/footer.js), which is
   shorter: js/footer.js pins its width while the notice shows, so neither the
   phone line nor the footer moves. */
.footer-link[href^="mailto:"] {
  display: inline-block;
  white-space: nowrap;
}

.footer-link:hover,
.footer-link:focus-visible {
  text-decoration: underline;
}

.footer-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  width: calc(100% - 40px);
  aspect-ratio: 1999.2 / 948.2;

  color: #3f3219;
  transition: color 0.3s ease;
}

/* Inlined SVGs (fill="currentColor") instead of mask-image, so the two
   Fill/Line variants are plain markup picked by js/footer.js instead of
   swapped mask URLs — same reasoning as .nav-logo-mark in nav.css. */
.footer-logo-mark {
  display: block;
  width: 100%;
  height: 100%;
}

.footer-logo-mark[hidden] {
  display: none;
}

/* ---------- Phones and tablets: shorter footer, logo upright ----------
   The footer panel is 60% of the viewport tall (the spacer that reveals it
   matches), not the whole screen. The logo reads left to right, as wide as
   the page margins allow, at the top margin; the contact lines sit right
   under it, left-aligned with it. The panel is never shorter than what it
   holds (logo + gap + two contact lines + the bottom margin): on a tablet
   held sideways 60% of the height is less than that. Desktop (>1180px)
   keeps the full-screen footer. */
@media (max-width: 1180px) {
  :root {
    --footer-h: max(
      60vh,
      calc((100vw - 40px) * 948.2 / 1999.2 + 20px + 20px + 32px + 20px)
    );
    --footer-h: max(
      60dvh,
      calc((100vw - 40px) * 948.2 / 1999.2 + 20px + 20px + 32px + 20px)
    );
  }

  .footer,
  .footer-spacer {
    height: var(--footer-h);
  }

  /* base.css reserves 140px under the page for the fixed nav; here that
     space would be extra scroll past the spacer, pulling the content up
     beyond the footer. The footer itself is the end of the page. */
  body:has(.footer-spacer) {
    padding-bottom: 0;
  }

  .footer {
    top: auto;
  }

  .footer-details {
    top: calc(20px + (100vw - 40px) * 948.2 / 1999.2 + 20px);
    transform: none;
  }

  /* Phones and tablets: the footer is normal content at the end of the
     document, not fixed or sticky behind the page. A fixed or sticky element
     stays anchored to the viewport while the document rubber-bands (WebKit
     r255037), so only the footer bounced; as plain content the whole page
     bounces with it. The price: no "revealed under the page" effect here
     (desktop keeps it). The spacer that reserved the scroll for that effect
     is not needed. Bug 027. */
  .footer-spacer {
    display: none;
  }

  /* js/footer.js hides the footer while the spacer is far from the screen
     (a fixed footer would show through when pulling past the top); here it
     is in the flow and always visible. */
  .footer.is-offscreen {
    visibility: visible;
  }

  .footer {
    position: relative;
  }
}

/* ---------- Large touch screens (iPad Pro sideways, wider than 1180px) ----------
   Same reasoning as above (bug 027, unit 068 R3): on a touch screen the footer is
   never a fixed layer. A fixed layer with a background that changes on every page
   change is what leaves the strips at the top and bottom in Safari. The full-screen
   panel of the desktop stays (100dvh tall) but is the last thing in the document,
   not revealed from behind it. Mouse screens keep the fixed, revealed footer. */
@media (min-width: 1181px) and (pointer: coarse), (min-width: 1181px) and (hover: none) {
  .footer,
  .footer-spacer {
    height: 100vh;
    height: 100dvh;
  }

  .footer-spacer {
    display: none;
  }

  body:has(.footer-spacer) {
    padding-bottom: 0;
  }

  .footer {
    position: relative;
    top: auto;
  }

  .footer.is-offscreen {
    visibility: visible;
  }
}

/* ---------- Wide phones and tablets (landscape, foldables) ----------
   Width ≥ 0.8 × height (up to 1180px: iPad Mini sideways, Pixel Fold open,
   phones on their side): the 60% footer left the contact lines right above
   the menu (it takes the bottom 99px: 79px + 20px margin). Here the footer is
   85–96% of the height: the logo (full width within the margins, or smaller
   if the height doesn't allow it), 20px, the two contact lines, and 159px
   under them (the menu's 99px + 60px of air). Taller portrait screens keep
   the 60% footer. */
@media (max-width: 1180px) and (min-aspect-ratio: 4/5) {
  :root {
    --footer-logo-w: min(
      calc(100vw - 40px),
      calc((96vh - 231px) * 1999.2 / 948.2)
    );
    --footer-logo-w: min(
      calc(100vw - 40px),
      calc((96dvh - 231px) * 1999.2 / 948.2)
    );
    --footer-logo-h: calc(var(--footer-logo-w) * 948.2 / 1999.2);
    --footer-h: max(85vh, calc(var(--footer-logo-h) + 231px));
    --footer-h: max(85dvh, calc(var(--footer-logo-h) + 231px));
  }

  .footer-logo {
    right: auto;
    width: var(--footer-logo-w);
  }

  .footer-details {
    top: calc(20px + var(--footer-logo-h) + 20px);
  }
}