/* Fixed nav bar with deep teal */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #1a535c;
  border-bottom: none;
}

.masthead__inner-wrap {
  background-color: #1a535c;
}

.greedy-nav {
  background-color: #1a535c;
}

.greedy-nav a {
  color: #e0f0f0;
}

.greedy-nav a:hover {
  color: #ffffff;
}

.greedy-nav .site-title {
  color: #ffffff;
}

.greedy-nav .site-subtitle {
  color: #a8d5d8;
}

.greedy-nav button {
  color: #e0f0f0;
}

/* Offset content for fixed nav */
body {
  padding-top: 7rem;
}

/* Search icon color */
.greedy-nav .search__toggle {
  color: #e0f0f0;
}

.greedy-nav .search__toggle:hover {
  color: #ffffff;
}

/* Wide layout: center content and use full width */
@media (min-width: 64em) {
  .wide .page__inner-wrap {
    max-width: 75ch;
    margin: 0 auto;
    float: none;
  }

  #primary[style] {
    margin-left: 0 !important;
  }

  .wide .page {
    float: none !important;
    width: 100% !important;
  }
}

.archive {
  max-width: 100%;
}

/* Smooth transitions on all interactive elements */
a,
button,
.nav__list a,
.pagination a,
.btn {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Smooth hover on links */
a:hover {
  transition: color 0.15s ease;
}

/* Smooth page content fade-in */
.page__content,
.archive {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Smoother sidebar */
.sidebar {
  transition: transform 0.3s ease;
}

/* Smooth image loading */
img {
  transition: opacity 0.3s ease;
}

/* Better scroll momentum on mobile */
.page__content,
.sidebar,
.masthead {
  -webkit-overflow-scrolling: touch;
}

/* Smooth masthead/nav transitions */
.greedy-nav a {
  transition: color 0.2s ease;
}

.greedy-nav a:hover {
  transition: color 0.15s ease;
}

/* Smooth archive item hover */
.archive__item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.archive__item:hover {
  transform: translateY(-2px);
}

/* Smooth code block rendering */
pre, code {
  transition: background-color 0.2s ease;
}