@charset "UTF-8";
/* ==========================================================
   blog.css — Posty Cards Blog
   Self-contained stylesheet for all blog pages.
   tabs_content.css is NOT required when using this file.
   ----------------------------------------------------------
   SECTIONS:
   1.  Base reset
   2.  Page container
   3.  Shared — used on BOTH index and article pages
   4.  Index page — blog home (/blog)
   5.  Article page — individual posts (/blog/post-slug)
   ========================================================== */


/* ==========================================================
   1. BASE RESET
   ========================================================== */

html, body {
  margin: 0;
  padding: 0;
}

.clear {
  clear: both;
}


/* ==========================================================
   2. PAGE CONTAINER
   ========================================================== */

#page-container {
  margin-top: -16px;
  margin-bottom: 25px;
  width: 815px;
  height: auto;
}

/* Apply border-box sizing to all elements inside page-container */
#page-container * {
  box-sizing: border-box;
}


/* ==========================================================
   3. SHARED — INDEX PAGE + ARTICLE PAGE
   ========================================================== */

/* --- Page title (h1) --- */
/* INDEX: "The Big Little Things — Posty Cards Blog"        */
/* ARTICLE: the post headline                               */
#page-container h1 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  margin: 50px 10px 3px 10px;
  padding: 0 0 2px 10px;
  font-size: 18px;
  color: #000;
  border-bottom: solid 2px #1d83b6;
}
#page-container h1.blog {
	margin-left: padding 0px;
}

/* --- White section wrapper --- */
/* INDEX: wraps the featured post (.years.blog-featured)    */
/* ARTICLE: wraps the entire article (.years.blog-article)  */
#page-container .years {
  background-color: #fff;
  border-bottom: 1px solid black;
  padding: 0;
  margin-top: -8px;
}

/* --- Content box --- */
/* INDEX: each post card (.content.blog-card)               */
#page-container .content {
  padding: 20px;
  background-color: white;
  position: relative;
  border-radius: 6px;
  outline: solid 1px #ccc;
}

/* --- Blog link style --- */
/* INDEX: card titles and featured title links              */
/* ARTICLE: the back-to-blog links                         */
#page-container a.blog {
  text-decoration: none;
  color: #000;
}

/* --- Category tag badge --- */
/* SHARED: appears on both featured post and each card      */
#page-container .blog-tag {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background-color: #9fc168;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Blue variant of category tag */
#page-container .blog-tag-blue {
  background-color: #1d83b6;
}

/* --- Publish date --- */
/* SHARED: appears on featured post, each card, and article */
#page-container .blog-date {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #888;
  margin: 0 0 8px 0;
}

/* --- Read Article button --- */
/* INDEX: "Read Article ›" button on the featured post      */
#page-container .blog-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #1d83b6;
  padding: 6px 14px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
}

#page-container .blog-btn:hover {
  background-color: #166a96;
  color: #fff;
}

/* Larger variant — "View All Articles" button              */
#page-container .blog-btn-lg {
  font-size: 13px;
  padding: 9px 22px;
}

/* --- Responsive two-column grid --- */
/* INDEX: wraps all post cards                              */
.responsive-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}

.responsive-column {
  flex: 48%;
  max-width: 48%;
  padding: 0 10px;
  margin: 0 0 0 9px;
}

.responsive-column img {
  vertical-align: middle;
  width: 100%;
}

/* Collapse to single column on small screens */
@media screen and (max-width: 768px) {
  .responsive-column {
    flex: 100%;
    max-width: 100%;
  }
}


/* ==========================================================
   4. INDEX PAGE — /blog
   ========================================================== */

/* --- Intro paragraph below the h1 --- */
#page-container .blog-intro {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #555;
  margin: 5px 10px 20px 20px;
}

/* --- Category filter tab bar wrapper --- */
#page-container .blog-nav-wrap {
  margin: 0 10px 25px 10px;
}

/* Category filter tab bar (uses existing #nav2 styles below) */
#nav2 ul {
  padding-left: 0;
  margin-left: 0;
  background-color: #9fc168;
  color: White;
  float: left;
  width: 571px;
  font-family: Arial, Helvetica, sans-serif;
}

#nav2 ul li {
  display: inline;
}

#nav2 ul li a {
  padding: 0.2em 1em;
  background-color: #9fc168;
  color: White;
  text-decoration: none;
  float: left;
  border-right: 1px solid #fff;
}

#nav2 ul li a:hover {
  background-color: #c6daa5;
  color: #1d83b6;
}

/* Active/selected tab */
#nav2 li.active a {
  background-color: #1d83b6;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}

/* --- Featured post (large card at top of index) --- */
#page-container .blog-featured {
  margin: 0 10px 25px 10px;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  border: solid 1px #ccc;
}

#page-container .blog-featured-inner {
  display: flex;
  flex-wrap: wrap;
}

#page-container .blog-featured-image {
  flex: 1 1 350px;
  min-width: 250px;
  background-color: #e8f0f7;
}

#page-container .blog-featured-img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

#page-container .blog-featured-body {
  flex: 1 1 300px;
  padding: 25px;
}

#page-container .blog-featured-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #1d83b6;
  margin: 10px 0 8px 0;
  padding: 0;
  background: none;
  border: none;
}

#page-container .blog-featured-excerpt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

/* --- Post card grid --- */
#page-container .blog-grid {
  margin: 0 5px;
}

#page-container .blog-card {
  margin-bottom: 20px;
}

/* Thumbnail image area inside each card */
#page-container .blog-card-image {
  margin: -20px -20px 15px -20px;
/*  background-color: #e8f0f7;*/
  min-height: 160px;
  overflow: hidden;
}

#page-container .blog-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* Card post title (h3) */
#page-container .blog-card-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #1d83b6;
  margin: 8px 0 5px 0;
  padding: 0;
}

/* Card excerpt text */
#page-container .blog-card-excerpt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #444;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

/* "Read Article ›" inline text link on cards */
#page-container .blog-read-more {
  font-size: 12px;
  font-weight: bold;
  color: #1d83b6;
  text-decoration: none;
}

#page-container .blog-read-more:hover {
  text-decoration: underline;
}

/* --- Pagination / "View All" row --- */
#page-container .blog-pagination {
  text-align: center;
  margin: 10px 10px 30px 10px;
}


/* ==========================================================
   5. ARTICLE PAGE — /blog/post-slug
   ========================================================== */

/* --- Article wrapper --- */
/* Applied alongside .years: <article class="years blog-article"> */
#page-container .blog-article {
  margin: 0 10px 30px 10px;
  padding: 30px;
/*  max-width: 760px;
*/}

/* --- Back to Blog link (top and bottom of article) --- */
#page-container .blog-back-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  margin-top: 25px;
  margin-bottom: 15px;
}

#page-container .blog-back-link a {
  color: #1d83b6;
  text-decoration: none;
  font-weight: bold;
}

#page-container .blog-back-link a:hover {
  text-decoration: underline;
}

/* --- Article header (tag + h1 + date) --- */
#page-container .blog-article-header {
  margin-bottom: 20px;
}

#page-container .blog-article-header h1 {
  margin: 10px 0 8px 0;
  border-bottom: none;
}

/* --- Hero image --- */
#page-container .blog-article-image {
  margin: 0 0 25px 0;
  border-radius: 6px;
  overflow: hidden;
	max-width: 45%;
}

#page-container .blog-article-image img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* --- Article body text --- */
#page-container .blog-article-body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #333;
}

#page-container .blog-article-body p {
  margin: 0 0 18px 0;
}

/* Section subheadings (h2) inside articles */
#page-container .blog-article-body h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #1d83b6;
  margin: 30px 0 12px 0;
  padding: 0;
  background: none;
  border: none;
}

/* Sub-subheadings (h3) inside articles */
#page-container .blog-article-body h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #333;
  margin: 22px 0 10px 0;
  padding: 0;
}

/* Inline images within article body */
#page-container .blog-article-body .blog-article-img {
  width: 100%;
  border-radius: 6px;
  margin: 10px 0 20px 0;
  display: block;
}

/* Pull quotes / blockquotes */
#page-container .blog-article-body blockquote {
  border-left: 4px solid #9fc168;
  margin: 20px 0;
  padding: 5px 0 5px 18px;
  font-style: italic;
  color: #555;
}

/* Lists */
#page-container .blog-article-body ul,
#page-container .blog-article-body ol {
  margin: 0 0 18px 0;
  padding-left: 22px;
}

#page-container .blog-article-body li {
  margin-bottom: 8px;
  list-style-image: none;
}