/*
 * Zatto layout for Forgejo 15: Codeberg's page frame in the colours of the
 * active theme.  Loaded after the theme stylesheet (templates/custom/header.tmpl),
 * uses only theme variables, so it works with every theme in [ui] THEMES.
 * Source: https://git.zatto.pl/Home-Lab/forgejo-custom
 *
 *   1. page frame  - content fills the first screen, the footer sits below it
 *   2. logo        - the Zatto glyph in the navbar and on the landing page
 *   3. footer      - brand column + link columns, bottom bar
 */

/* 1. page frame --------------------------------------------------------- */

.full.height {
  flex-shrink: 0;
  min-height: 100vh;
}

/* 2. logo ----------------------------------------------------------------
 * img/logo.svg is the app icon (dark tile + white glyph): right for the
 * PWA manifest and link previews, too heavy inside the navbar.  There the
 * <img> content is shifted out of its box and the glyph is painted as a
 * mask over the theme text colour, so it follows light and dark themes.
 * object-position also applies with the default object-fit: fill (CSS Images
 * 3, 5.5) - verified: the navbar pixels are the theme colour, not the tile's. */

#navbar-logo img,
.page-content.home img.logo {
  object-position: -10000px 0;
  background-color: var(--color-nav-text, var(--color-text));
  -webkit-mask: url("../img/zatto/glyph.svg") center / 74% auto no-repeat;
  mask: url("../img/zatto/glyph.svg") center / 74% auto no-repeat;
}

.page-content.home img.logo {
  background-color: var(--color-text-dark);
  -webkit-mask-size: 58% auto;
  mask-size: 58% auto;
}

/* 3. footer --------------------------------------------------------------- */

.page-footer.zatto-footer {
  display: block;
  padding: 0 20px;
  color: var(--color-text-light-2);
  container: zatto-footer / inline-size;
}

/* zatto-dark keeps --color-footer equal to its black body, so the footer
 * would melt into the page: lift it one step, to the theme's box-header tone.
 * This lives here and not in theme-zatto-dark.css on purpose.  Forgejo links
 * theme files with its own version string, which our deploys don't change, and
 * browsers cache /assets for 6 h, so a theme edit reaches visitors hours late.
 * This file's URL carries a content hash (templates/custom/header.tmpl). */
html[data-theme="zatto-dark"] .page-footer.zatto-footer {
  background-color: var(--color-box-header);
}

.zatto-footer a {
  color: var(--color-text-light);
}

.zatto-footer a:hover,
.zatto-footer a:focus-visible {
  color: var(--color-primary-hover);
}

.zatto-footer-grid,
.zatto-footer-bottom {
  max-width: 1280px;
  margin-inline: auto;
}

.zatto-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2em 20px;
  padding-block: 2.5em 2em;
}

/* brand column */

.zatto-footer-logo {
  display: inline-block;
  line-height: 0;
}

.zatto-footer .zatto-footer-logo {
  color: var(--color-text-dark);
}

.zatto-wordmark {
  width: 168px;   /* WORDMARK_WIDTH in tools/sync_inline.py */
  height: auto;
}

.zatto-powered-by {
  margin-top: 1.75em;
  font-size: 13px;
  line-height: 1.6;
}

.zatto-powered-by-title {
  display: block;
  margin-bottom: 0.4em;
}

.zatto-forgejo-logo {
  display: block;
  width: 100px;
  margin-bottom: 0.25em;
  line-height: 0;
}

.forgejo-wordmark {
  width: 100px;
  height: auto;
}

/* link columns */

.zatto-footer-col b {
  display: block;
  color: var(--color-text-dark);
  font-size: 1.85em;
  font-weight: var(--font-weight-normal, 400);
  line-height: 1.2;
}

.zatto-footer-col ul {
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
  line-height: 2em;
}

/* bottom bar */

.zatto-footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1em;
  padding-block: 1em 1.25em;
  border-top: 1px solid var(--color-secondary);
  font-size: 13px;
}

.zatto-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1em;
  justify-content: center;
}

.zatto-footer-lang {
  justify-self: end;
}

.zatto-footer .ui.dropdown.language {
  padding: 6px 12px;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  color: var(--color-text-light);
}

.zatto-footer .ui.dropdown.language:hover {
  background: var(--color-hover);
}

.zatto-footer .ui.dropdown.language .menu {
  max-height: min(500px, calc(100vh - 60px));
  overflow-y: auto;
  margin-bottom: 8px;
}

/* narrower screens: two columns, then one; the logo stays visible */

@container zatto-footer (width < 965px) {
  .zatto-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container zatto-footer (width < 560px) {
  .zatto-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .zatto-footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .zatto-footer-meta {
    justify-content: flex-start;
  }

  .zatto-footer-lang {
    justify-self: start;
  }
}