frontend/src/styles/components/_footer.css

/* -----------------------------------------------------------------------
   Footer - shared between editor and published page.
   Visually aligned with the research-article-template's Footer.astro.
   Uses CSS variables where they compose well with the template's look,
   and the template's exact rgba() values where they produce the
   distinctive discreet-grey look of the appendix.
   ----------------------------------------------------------------------- */

.footer {
  contain: layout style;
  font-size: 0.8em;
  line-height: 1.7em;
  margin-top: 60px;
  margin-bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 16px 48px;
  display: grid;
  grid-template-columns: 220px minmax(0, 680px) 260px;
  gap: 32px;
  align-items: start;
}

/* Use the parent grid (3 columns like .content-grid) */
.citation-block,
.references-block,
.reuse-block,
.doi-block {
  display: contents;
}

.citation-block > .footer-heading,
.references-block > .footer-heading,
.reuse-block > .footer-heading,
.doi-block > .footer-heading {
  grid-column: 1;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  text-align: right;
  padding-right: 30px;
}

.citation-block > :not(.footer-heading),
.references-block > :not(.footer-heading),
.reuse-block > :not(.footer-heading),
.doi-block > :not(.footer-heading) {
  grid-column: 2;
}

.citation-block .footer-heading { margin: 0 0 8px; }

.citation-block h4 {
  margin: 16px 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--muted-color);
}

.citation-block p,
.reuse-block p,
.doi-block p,
.footnotes ol,
.footnotes ol p,
.references { margin-top: 0; }

/* Preserve KaTeX rendering in footnotes - essential for math formulas.
   Compensates for the footer's 0.8em font-size (1em / 0.8em = 1.25em). */
.footer .footnotes .katex {
  font-size: 1.25em;
  line-height: 1.21;
}
.footer .footnotes .katex-display {
  margin: 1em 0;
  text-align: center;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}
.footer .footnotes .katex-display > .katex {
  display: block;
  text-align: center;
}
.footer .footnotes .katex .katex-html { display: inline-block; }
.footer .footnotes .katex .base { display: inline-block; }

/* Distill-like appendix citation styling */
.citation {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  line-height: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  padding: 10px 18px;
  border-radius: 3px;
  color: rgba(150, 150, 150, 1);
  overflow: hidden;
  margin-top: -12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.citation a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
}

.citation.short { margin-top: -4px; }

/* Published inline citation links */
.citation-inline {
  color: var(--primary-color, #958df1);
  text-decoration: none;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: text-decoration-color 0.15s;
}
.citation-inline:hover { text-decoration-color: currentColor; }

/* Bibliography block inside footer: drop the article-body framing
   (border-top, padding, margin) so the content sits cleanly next to the
   footer-heading column. */
.footer .bibliography-block {
  margin: 0;
  padding: 0;
  border: 0;
}
.footer .bibliography-title { display: none; }

/* Bibliography entries inside footer */
.footer .bibliography-content .csl-entry {
  margin-bottom: 0.75em;
  padding-left: 1.5em;
  text-indent: -1.5em;
  font-size: 0.9em;
  line-height: 1.5;
}

.bibliography-content .csl-entry:target {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-radius: 4px;
  padding: 4px 4px 4px 1.5em;
}

/* Footnote refs (published page) */
.footnote-ref a {
  color: var(--primary-color, #958DF1);
  text-decoration: none;
  font-size: 0.8em;
}
.footnote-ref a:hover { text-decoration: underline; }

/* Footnotes list (both editor footer and published) */
.footnotes ol,
.footnotes-list {
  padding-left: 1.5em;
  margin: 0;
}
.footnotes li,
.footnotes-list li {
  margin-bottom: 0.5em;
  font-size: 0.9rem;
}
.footnotes li p,
.footnotes-list li p { margin: 0; }
.footnote-backref { text-decoration: none; margin-left: 4px; }

/* References block */
.references-block .footer-heading { margin: 0; }
.references-block ol { padding: 0 0 0 15px; }
.references-block li { margin-bottom: 1em; }
.references-block a { color: var(--text-color); }

@media (min-width: 768px) {
  .references-block ol { padding: 0 0 0 30px; margin-left: -30px; }
}

/* Footer links: use primary color consistently */
.footer a {
  color: var(--primary-color);
  border-bottom: 1px solid var(--link-underline);
  text-decoration: none;
}
.footer a:hover {
  color: var(--primary-color-hover);
  border-bottom-color: var(--link-underline-hover);
}

/* Dark mode overrides */
[data-theme="dark"] .footer {
  border-top-color: rgba(255, 255, 255, 0.15);
  color: rgba(200, 200, 200, 0.8);
}
[data-theme="dark"] .citation {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(200, 200, 200, 1);
}
[data-theme="dark"] .citation a { color: rgba(255, 255, 255, 0.75); }
[data-theme="dark"] .footer a { color: var(--primary-color); }

/* Template credit - discrete at the bottom */
.template-credit { display: contents; }
.template-credit p {
  grid-column: 2;
  margin: 24px 0 0 0;
  font-size: 0.85em;
  color: rgba(0, 0, 0, 0.5);
}
.template-credit a {
  color: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.template-credit a:hover {
  color: rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .template-credit p { color: rgba(200, 200, 200, 0.6); }
[data-theme="dark"] .template-credit a {
  color: rgba(200, 200, 200, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .template-credit a:hover {
  color: rgba(200, 200, 200, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

/* -----------------------------------------------------------------------
   Mobile/tablet responsive layout.
   Collapse the 3-column grid (heading | content | spacer) into a single
   stacked column. The sections use `display: contents` on desktop, so the
   headings and paragraphs are actual DOM children of `.footer-inner`:
   a child combinator like `.footer-inner > .footer-heading` never matches.
   Below, we target all `.footer-heading` inside the footer and reset the
   grid positioning applied to siblings.
   ----------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .footer-inner {
    display: block;
    padding: 40px 16px;
  }

  .footer .footer-heading {
    grid-column: auto;
    text-align: left;
    padding-right: 0;
    margin: 24px 0 8px;
  }

  .footer .footer-inner > section + section {
    margin-top: 8px;
  }

  .citation-block > :not(.footer-heading),
  .references-block > :not(.footer-heading),
  .reuse-block > :not(.footer-heading),
  .doi-block > :not(.footer-heading),
  .template-credit p {
    grid-column: auto;
  }

  .template-credit p {
    margin-top: 32px;
  }

  .citation {
    overflow-x: auto;
    margin-top: 0;
  }
  .citation.short { margin-top: 0; }

  .references-block ol {
    padding-left: 1.5em;
  }
}

@media (max-width: 480px) {
  .footer-inner {
    padding: 32px 14px;
  }
  .citation {
    font-size: 10.5px;
    padding: 8px 12px;
  }
}