/*
 * The global footer (templates/__ng_footer.tpl), niguroapp's footer.php: a utility bar (tagline +
 * square outlined social icons) closed by a hairline, centred link rows with pipes, a short rule and
 * the credit line, and the site logo, muted, at the very bottom. It sits on the page canvas (no band),
 * full width under the content (beside the rail from 1024px), max 1100px inside.
 * On short pages it rests on the bottom of the screen (niguroapp's sticky footer). Under 1024px the body
 * already keeps 92px clear for the pill nav, so the logo ends ~50px above the bar, as on niguroapp.
 */

/* sticky footer: the page column grows, the footer takes what is left. [perf: :has] body.ng-has-footer is set
   by _header.tpl under the same test as the footer's include (_footer.tpl); the body:has(...) forms made
   every DOM change on every page re-check the whole document */
body.ng-has-footer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.ng-has-footer > .main-wrapper { display: flex; flex-direction: column; flex: 1 0 auto; }
.main-wrapper > .ng-footer { flex-shrink: 0; margin-top: auto; }
/* the status pages (404, permission, banned…) centre their card in the space above the footer
   (utility.css sizes them for Sngine's old one-line footer) */
body.ng-has-footer > .main-wrapper > .ng-ustate-page { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
body.ng-has-footer > .main-wrapper > .ng-ustate-page .ng-hubwrap { min-height: 0; }
/* Sngine gives "See more" 90px below it on phones to clear its own bottom bar; the footer and the body's
   pill-nav clearance do that now, so it keeps its desktop 20px */
@media (max-width: 768px) { body.ng-has-footer > .main-wrapper .see-more { margin-bottom: 20px; } }

.ng-footer {
  /* the footer's rules: one step darker than the line token by day (niguroapp darkens them too,
     the token is too close to the canvas); the token itself at night */
  --ng-ft-rule: hsl(var(--foreground) / .13);
  width: 100%; padding-top: 16px; background: transparent; color: var(--ng-sub);
}
body.night-mode .ng-footer { --ng-ft-rule: var(--ng-line); }
.ng-footer__wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
@media (min-width: 768px) { .ng-footer__wrap { padding-left: 48px; padding-right: 48px; } }

/* utility bar */
.ng-footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ng-ft-rule);
}
.ng-footer__tagline { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ng-sub); }
@media (max-width: 767.98px) {
  .ng-footer__bar { flex-direction: column; gap: 12px; }
  .ng-footer__tagline { text-align: center; }
}

/* square, outlined social icons */
.ng-soc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ng-soc--footer .ng-soc__link {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  border: 1px solid var(--ng-ft-rule); border-radius: 6px; background: var(--ng-card); color: var(--ng-sub);
  text-decoration: none; transition: color .15s, border-color .15s;
}
.ng-soc--footer .ng-soc__link svg { width: 16px; height: 16px; }
.ng-soc--footer .ng-soc__link:hover { color: var(--ng-brand); border-color: hsl(var(--primary) / .45); }

/* link rows */
.ng-footer__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; margin-bottom: 4px; }
.ng-footer__links a {
  display: inline-flex; align-items: center; padding: 4px 2px; font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--ng-sub); text-decoration: none; transition: color .15s;
}
.ng-footer__links a:hover { color: var(--ng-ink-strong); }
.ng-footer__links > span { font-size: 13px; color: hsl(var(--muted-foreground) / .5); }

/* credit, under a short centred rule (550px; 60% of the row on phones) */
.ng-footer__credit { margin: 20px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--ng-sub); }
.ng-footer__credit::before { content: ""; display: block; width: 550px; max-width: 100%; height: 1px; margin: 0 auto 12px; background: var(--ng-ft-rule); }
@media (max-width: 767.98px) { .ng-footer__credit::before { width: 60%; } }
.ng-footer__bs { white-space: nowrap; }

/* the logo: muted at rest, its own colours on hover */
.ng-footer__logo { display: flex; justify-content: center; margin-top: 16px; }
.ng-footer__logo a { display: inline-flex; align-items: center; min-height: 0; text-decoration: none; }
.ng-footer__img { width: auto; height: 32px; opacity: .6; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.ng-footer__logo a:hover .ng-footer__img { opacity: 1; filter: none; }
.ng-footer__img--night { display: none; }
body.night-mode .ng-footer__img--day { display: none; }
body.night-mode .ng-footer__img--night { display: block; }
.ng-footer__logo .ng-wordmark { font-size: 15px; opacity: .6; transition: opacity .15s; }
.ng-footer__logo a:hover .ng-wordmark { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ng-soc__link, .ng-footer__links a, .ng-footer__img { transition: none; }
}

/* ---- [Phone footer in menu] (owner, 2026-10-19): phones (under 768px) feel like an app: no page footer; the
   same footer (__ng_footer.tpl _ft_menu=true) closes the ☰ menu instead, under a hairline, and replaces the
   menu's short link row. Tablets and desktop keep the page footer and the short row. The body's pill-nav
   clearance (niguro.css, 92px under 1024px) keeps the last card off the bottom bar. ---- */
/* (owner, 2026-10-19) the ☰ menu closes with the full footer at every width, not only on phones; only phones hide
   the page footer */
.ng-fmenu .ng-fm-links { display: none; }
.ng-footer--menu { display: block; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--ng-ft-rule); }
.ng-footer--menu .ng-footer__wrap { padding: 0 4px; }
.ng-footer--menu .ng-soc--footer .ng-soc__link { background: transparent; }
@media (max-width: 767.98px) {
  #site-footer { display: none; }
}
/* ---- /[Phone footer in menu] ---- */