/*top nav */
ul.topnav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: auto;
            background-color: #333;
          }

          ul.topnav li {
            float: left;
          }

          ul.topnav li a, .dropbtn {
            display: inline-block;
            color: rgb(255, 255, 255);
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
          }

          ul.topnav li a:hover, .dropdown:hover .dropbtn {
            background-color: rgb(107, 150, 190);
          }

          ul.topnav li.dropdown {
            display: inline-block;
          }

          ul.topnav  .dropdown-content {
            display: none;
            position: absolute;
            background-color: rgb(172, 196, 218);
            min-width: 750px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
          }

          ul.topnav .dropdown-content a {
            color: rgb(250, 248, 248);
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
          }

          ul.topnav .dropdown-content a:hover {background-color: #9cb1c9;}

          ul.topnav .dropdown:hover .dropdown-content {
            display: block;
          }

          @media screen and (max-width: 670px) {
            ul.topnav li.right,
            ul.topnav li {float: none;}
          }



.tag-container {
  margin: 1rem 0;
  text-align: center; /* Matches your centered header style */
}

.post-tag {
  display: inline-block;
  background: #eee;
  color: #333;
  padding: 4px 10px;
  border-radius: 4px;
  margin: 0 5px;
  text-decoration: none;
  font-size: 0.9rem;
}

.post-tag:hover {
  background: rgb(107, 150, 190); /* Using your signature blue */
  color: white;
}

/* --- Base Styles (Mobile/Phone View) --- */

.post-card .post-image {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

img {
  max-width: 100%;
  height: auto;      /* This ensures the height scales proportionally with the width */
  display: block;
  aspect-ratio: auto; /* Ensures no forced ratio from other rules */
}

/* --- Tablet/Desktop View --- */
@media (min-width: 600px) {
  .post-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  .post-image-container {
    display: block; /* Reset centering for desktop */
    width: 150px;
    flex-shrink: 0;
  }
}

/* Target images inside your article content specifically */
article img, 
.post-content img {
  width: 100%;
  max-width: 100%;
  height: auto;      /* Proportional scaling */
  object-fit: contain; 
  margin: 2rem auto;
}