/* Site-specific overrides on top of the hugo-texify3 theme. */

/* Justified body text, with hyphenation to avoid wide word gaps. */
#content.index p,
.content p {
  text-align: justify;
  hyphens: auto;
}

/* Home page: the theme's index content is not a .content block. */
#content.index p {
  margin-bottom: 1.1rem;
}

/* Home page: don't reserve a sidebar column when there is no taxonomy yet. */
.grid-container > #content.index:not(:has(~ .sidebar > *)) {
  grid-column: 1 / -1;
}

/* Social icons row (layouts/shortcodes/social.html). */
.social-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.social-links a {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.social-links a:link,
.social-links a:visited {
  color: var(--fg);
}

.social-links a:hover {
  color: var(--blue);
}

.social-links svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* About page portrait. */
.content img.portrait {
  float: right;
  width: 180px;
  border-radius: 50%;
  margin: 0 0 1rem 1.5rem;
}

.content h2 {
  clear: both;
}

/* Social icons in the header corner, opposite the dark-mode toggle. */
.header-social {
  position: absolute;
  top: calc(((4px + 1.1rem) / 2) + 12.55px + 0.6rem);
  left: calc(16vw + 0.5rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Home page: latest posts. */
.latest-posts {
  margin-top: 2rem;
}

.latest-posts h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.latest-posts ul {
  list-style: none;
}

.latest-posts li {
  border-top: 1px solid var(--bg2);
  padding: 0.7rem 0;
}

.latest-posts a.latest-post {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: var(--fg1);
}

.latest-posts a.latest-post:hover .latest-post-title {
  color: var(--blue);
}

.latest-post-title {
  font-size: 1.15rem;
  font-weight: bold;
  transition: color 0.2s ease;
}

.latest-posts time {
  margin-left: 0;
  white-space: nowrap;
  font-size: 0.95rem;
}

#content.index p.latest-post-summary {
  color: var(--fg4);
  margin: 0.25rem 0 0;
}

#content.index p.latest-posts-more {
  margin: 0.5rem 0 0;
  text-align: right;
}

@media screen and (max-width: 768px) {
  /* Keep the site title clear of the corner icons and dark-mode toggle. */
  #header > h1 {
    padding: 0 3.6rem;
  }

  .header-social {
    left: calc((4px + 1.1rem) / 2 + 0.3rem);
    gap: 0.5rem;
  }

  .header-social svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  .content img.portrait {
    float: none;
    display: block;
    margin: 0 auto 1rem;
  }
}