/* Custom CSS fixes */

/*
 * NAVIGATION FIXES
 * Make all navigation items properly aligned
 */

/* Override navigation styles to fix alignment issues */
.site-navigation {
  display: flex !important;
  align-items: center !important;
}

.nav-menu {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.nav-menu > li {
  position: relative !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.nav-menu > li > a {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 1rem !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
}

/* Apply the same styling to all menu items */
.nav-menu > li,
.nav-menu > li:last-child,
.nav-menu > li:nth-last-child(2) {
  margin: 0 !important;
}

/*
 * IMAGE RESIZING STYLES
 * Handle different image aspect ratios
 */

/* Standard post image container with fixed aspect ratio */
.post-content img,
.post-content .responsive-image,
.post-card-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Container for standard 630x330 post thumbnails */
.standard-image-container {
  width: 100%;
  height: 0;
  padding-bottom: 52.38%; /* 330/630 = 0.5238 */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.standard-image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

/* Portrait/vertical images (taller than wide) */
.portrait-image-container img {
  width: 100%;
  max-height: 800px;
  object-fit: contain;
}

/* Landscape/horizontal images (wider than tall) */
.landscape-image-container img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}

/* Make images responsive in post content */
.post-content img {
  max-width: 100%;
  height: auto;
}

/* Apply styles to responsive image containers */
.responsive-image-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Automatic aspect ratio detection and handling */
.responsive-image-container[data-ratio="portrait"] img {
  max-height: 800px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.responsive-image-container[data-ratio="landscape"] img {
  width: 100%;
  height: auto;
}

.responsive-image-container[data-ratio="square"] img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Set default thumbnail size for post cards */
.post-card .post-card-image-link img {
  width: 100%;
  height: auto;
  aspect-ratio: 630/330;
  object-fit: cover;
}