/* Personal polish layer for the Fluid theme. */
:root {
  --blog-accent: #7c5cff;
  --blog-accent-soft: rgba(124, 92, 255, .16);
  --blog-border: rgba(127, 145, 180, .22);
  --blog-shadow: 0 16px 40px rgba(13, 19, 33, .16);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#navbar {
  background: rgba(18, 24, 39, .58);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  transition: background-color .25s ease, box-shadow .25s ease;
}

.index-posts .index-card {
  border: 1px solid var(--blog-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.index-posts .index-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 92, 255, .48);
  box-shadow: var(--blog-shadow);
}

.index-header a,
.post-content a {
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.index-header a:hover,
.post-content a:hover {
  color: var(--blog-accent);
}

.post-content img {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(13, 19, 33, .14);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blog-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .index-posts .index-card,
  #navbar {
    transition: none;
  }
  .index-posts .index-card:hover {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .index-posts .index-card {
    border-radius: 14px;
  }
  .index-header {
    line-height: 1.35;
  }
}