/* Wordmark (variant C): terminal style, "zeitenwende.ai" in the mono font,
   ".ai" in the accent color, underscore cursor after the nav wordmark.
   On the homepage the nav wordmark types itself out once on load. */
.wordmark {
  font-family: var(--mono-text-font), monospace;
}

/* Mono glyphs are wider; scale down to keep the theme's visual size. */
nav .wordmark {
  font-size: 0.87em;
}

.wordmark .tld {
  color: var(--primary-color);
}

/* The theme's link hover uses --primary-color as background; without this the
   red ".ai" would vanish into it. */
a.wordmark:hover .tld {
  color: var(--hover-color);
}

/* --- Cursor ------------------------------------------------------------ */
nav .wordmark::after {
  content: "_";
  animation: wordmark-blink 1s steps(1) infinite;
}

@keyframes wordmark-blink {
  50% {
    opacity: 0;
  }
}

/* --- Typing animation (homepage) ----------------------------------------
   --chars is set in templates/partials/nav.html to the title length. Every
   glyph in a monospace font is 1ch wide, so the width steps reveal one
   character at a time. The link reserves its final width so the icons next to
   it don't shift while typing; the cursor stays solid until typing is done. */
nav .wordmark.typing {
  --type-delay: 0.4s;
  --type-duration: 1.6s;
  display: inline-block;
  min-width: calc((var(--chars) + 1) * 1ch);
}

nav .wordmark.typing .typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: wordmark-type var(--type-duration) steps(var(--chars)) var(--type-delay) both;
}

nav .wordmark.typing::after {
  animation-delay: calc(var(--type-delay) + var(--type-duration));
}

@keyframes wordmark-type {
  from {
    width: 0;
  }
  to {
    width: calc(var(--chars) * 1ch);
  }
}

@media (prefers-reduced-motion: reduce) {
  nav .wordmark::after,
  nav .wordmark.typing .typed {
    animation: none;
  }
}

/* --- Links in content ----------------------------------------------------
   The theme underlines links with a solid 2px accent border; use a thinner,
   lighter line instead. (Theme exceptions like `.meta a` have higher
   specificity and still win.) */
main a {
  border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
}

/* --- Footer (templates/partials/footer.html) -----------------------------
   Muted, small, same link style as the nav. .content becomes a flex column so
   the footer sits at the bottom of the viewport on short pages. */
body .content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 7rem);
}

.site-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--text-1);
}

.site-footer .footer-links a + a {
  margin-left: 0.5em;
}

/* --- Cards (content/_index.md) -------------------------------------------
   <div class="cards"> with one <div class="card"> per item: side by side on
   wide screens, stacked on narrow ones. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.cards .card {
  position: relative;
  padding: 0 1rem 1.2rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

/* "Read more" arrow (templates/components/more.html): bottom-right corner,
   in the accent color; cards in a row share a height, so arrows line up.
   The card's bottom padding keeps it clear of the text. */
.cards .more {
  position: absolute;
  right: 0.75rem;
  bottom: 0.6rem;
  margin: 0;
  line-height: 1;
}

.cards .more a {
  border-bottom: none;
  color: var(--primary-color);
  font-size: 1.3rem;
  padding: 0 0.2rem;
}

.cards .more a:hover {
  color: var(--hover-color);
}

.cards h2,
.cards h3 {
  margin-top: 1rem;
  font-size: 1.15rem;
}

.cards h2 a {
  border-bottom: none;
}

.cards ul {
  padding-left: 1.2rem;
}

/* --- Diagrams (static/js/diagrams.js) ----------------------------------- */
.diagram {
  margin: 1.5rem 0;
  text-align: center;
}

.diagram svg {
  max-width: 100%;
  height: auto;
}

/* --- Tables ---------------------------------------------------------------
   The theme's tables size to their content and use large headers, which
   overflows narrow screens. Fill the column instead, and scroll as a last
   resort. */
main table {
  width: 100%;
}

main table th {
  font-size: inherit;
}

@media (max-width: 600px) {
  main table {
    display: block;
    overflow-x: auto;
    font-size: 0.9em;
  }

  main table th,
  main table td {
    padding: 4px 6px;
  }
}

.cards h3 a {
  border-bottom: none;
}

/* --- Page titles as <h1> (templates/components/post.html, home.html) -------
   The theme renders page titles as a <div class="page-header"> and decorates
   every h1 with a "# " prefix. The titles are real <h1>s now, so keep their
   original look. The search dialog title became an <h2> (nav.html); restore
   its "# " prefix and spacing. */
/* Headings use the text font. The theme's --header-font lacks a comma after
   "ZedDisplayFtl", which makes the value invalid, so headings have always
   fallen back to the text font; that thin look is the intended one. Set it
   explicitly so a theme update fixing the comma doesn't switch to ZedDisplay
   Heavy. */
:root {
  --header-font: var(--text-font);
}

h1.page-header {
  font-weight: normal;
  /* The theme's 2.5em makes long single words ("Datenschutzhinweise") wider
     than a phone screen, and .content's word-wrap: break-word then splits
     them mid-word. Scale with the viewport on narrow screens so they fit. */
  font-size: min(2.5em, 9vw - 4px);
}

h1.page-header::before {
  content: none;
}

#modal-content h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

#modal-content h2::before {
  content: "# ";
}

/* Post titles in lists became <h2> (components/post.html): same look as the
   theme's list <h1>, including the "# " prefix. */
.post-header h2 {
  margin: 0;
  font-weight: normal;
  font-family: var(--header-font);
  font-size: 1.2rem;
}

.post-header h2::before {
  content: "# ";
}

.post-header h2 a {
  border-bottom: none;
}