/* ---------------------------------------------------------------
   Custom styles on top of TeXify3.
   Everything uses the theme's gruvbox CSS variables, so both the
   light and dark modes are handled for free.
   --------------------------------------------------------------- */

/* -----------------------------------------------------------------
   Centering & responsiveness — general safety net
   -----------------------------------------------------------------
   The theme centers its main column already (#wrapper padding is
   computed from $max-width in vars.scss). The two concrete bugs
   were: (1) the homepage reserved a sidebar column whenever tags
   existed, pushing the bio text off-center — fixed by removing the
   sidebar in layouts/index.html, not here; and (2) that same
   sidebar-less <main> wasn't stretching to push the footer to the
   bottom of short pages. This rule is a general-purpose fix for #2
   that also covers any future page that isn't using the theme's
   own #main id. */
#wrapper > main {
  flex: 1 0 auto;
}

/* Comfortable reading width for the homepage bio + recent posts,
   centered within the theme's wider column. Without this the text
   stretches the full page width, which reads as "not centered" on
   wide monitors even though the container itself is. */
.home-content {
  max-width: 720px;
  margin: 0 auto;
}

/* Belt-and-suspenders responsive rules. The theme already
   constrains images/tables/pre inside `.content`, but the safety
   net here covers anything outside that wrapper too, so nothing
   can force horizontal scroll on narrow screens. */
img,
video,
iframe,
object {
  max-width: 100%;
  height: auto;
}

table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

pre,
code {
  overflow-x: auto;
  max-width: 100%;
}

/* Recent posts block on the homepage */
.recent-posts {
  list-style: none;
  padding-left: 1.5rem;
  border-left: 1px solid var(--fg4);
  margin-left: 0.5rem;
}

.recent-posts li {
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.recent-posts li:hover {
  background-color: var(--bg_s);
}

.recent-posts a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.15rem 0.5rem;
  line-height: 1.8;
  text-decoration: none;
  color: var(--blue);
}

.recent-posts a:visited {
  color: var(--blue-dim);
}

.recent-posts time {
  color: var(--fg4);
  font-size: 0.85em;
  white-space: nowrap;
}

@media screen and (max-width: 480px) {
  .recent-posts a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }
}

/* Whitepaper page */
.paper-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 1rem 0 2rem;
  font-size: 0.95em;
}

.paper-embed {
  width: 100%;
  height: 80vh;
  min-height: 400px;
  border: 1px solid var(--fg4);
  border-radius: 4px;
  background-color: var(--bg_s);
}

@media screen and (max-width: 600px) {
  .paper-embed {
    height: 60vh;
    min-height: 320px;
  }
}

/* Optional: small avatar on the homepage.
   Use it by putting this in content/_index.md:
   <img class="avatar" src="/eu.jpg" alt="Carlos Santos"> */
.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  float: right;
  margin: 0 0 1rem 1.5rem;
  border: 1px solid var(--fg4);
}

@media screen and (max-width: 480px) {
  .avatar {
    float: none;
    display: block;
    margin: 0 auto 1rem;
  }
}