/* ========================================
   Post Layout (Single Blog Post)
   ======================================== */

.post-layout .info-content-wrapper {
  display: block;
}

/* ========================================
     Post Content
     ======================================== */

.post-content-inner {
  max-inline-size: 44rem;
  margin-inline: auto;
  padding-top: 1.5rem;
}

.post-header {
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dotted !important;
}

.post-content-inner .post-title {
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--deep-blue);
  line-height: 1.2;
  padding-bottom: 0;
}

/* Featured image */
.post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

/* Meta text */
.post-meta {
  font-size: 0.875rem;
  color: var(--almost-black);
  font-weight: 600;
}

.post-meta time,
.post-meta .post-categories {
  color: var(--almost-black);
}

/* Hide post categories in post meta */
.post-meta .post-categories {
  display: none;
}

/* ========================================
   Content Panels
   ======================================== */
.panel {
  border-radius: 1rem;
  padding: 1.5rem;
  margin-block: 2rem;
  color: var(--almost-black);
}

.panel--grey {
  background-color: #f4f5f7;
  color: var(--almost-black);
}

.panel--cyan {
  background-color: var(--cyan-20);
  color: var(--almost-black);
}

.panel h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.panel p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.panel p:last-child {
  margin-bottom: 0;
}

.panel--green {
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--almost-black);
}

.panel--green ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.panel--green ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.panel--green ul li::before {
  content: "\f058"; /* fa-circle-check */
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Free", "Font Awesome 6 Pro";
  font-weight: 900;
  color: var(--green); /* theme-color equivalent for green */
  font-size: 1rem;
  line-height: 1;
  margin-top: 0.5em;
}

.panel-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--almost-black);
  margin-bottom: 0.75rem;
}

.post-small-h2 {
  font-size: 1.4rem;
  margin: 0 0 1.25rem 0;
  border-bottom: 2px dotted !important;
  padding: 0 0 0.75rem 0;
}

.post-body h2 {
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--almost-black);
}

.panel .post-small-bullet-h2 {
  font-size: 1.75rem;
  margin: 0 0 1.25rem 0;
  border-bottom: 2px dotted var(--green) !important;
  padding: 0 0 0.75rem 0;
  font-weight: 700;
  line-height: 1.4;
}

.panel .post-small-bullet-h3 {
  font-size: 1.5rem;
  margin: 0 0 1.25rem 0;
  border-bottom: 2px dotted var(--almost-black) !important;
  padding: 0 0 0.75rem 0;
  font-weight: 700;
  line-height: 1.4;
}

.panel .post-small-award-bullet-h3 {
  font-size: 1.5rem;
  margin: 0 0 1.25rem 0;
  border-bottom: 2px dotted var(--almost-black) !important;
  padding: 0 0 0.75rem 0;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel .post-small-award-bullet-h3::before {
  content: "\f559"; /* fa-award unicode */
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400; /* regular style */
}

.post-body .post-small-turquoise-h2 {
  font-size: 1.75rem;
  margin: 0 0 1.25rem 0;
  border-bottom: 2px dotted var(--turquoise) !important;
  padding: 0 0 0.75rem 0;
  font-weight: 700;
  line-height: 1.4;
}

/* ========================================
     Sidebar Modules
     ======================================== */

.post-sidebar-module {
  /* Soft themed panel background — mirrors your contact module pattern */
  background-color: var(--bg-color);
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.post-sidebar-module .sidebar-title {
  font-size: 1.4rem;
  margin: 0 0 1.25rem 0;
  border-bottom: 2px dotted !important;
  padding: 0 0 0.75rem 0;
}

.post-sidebar-module .sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-sidebar-module .sidebar-nav li {
  margin-bottom: 0.5rem;
}

.post-sidebar-module .sidebar-nav a {
  text-decoration: none;
  color: var(--almost-black);
  font-weight: 600;
}

.post-sidebar-module .sidebar-nav a:hover,
.post-sidebar-module .sidebar-nav a:focus {
  text-decoration: underline;
}

.post-sidebar-module .sidebar-nav li.active a,
.post-sidebar-module .sidebar-nav a[aria-current="page"] {
  border-left-color: var(--deep-blue);
  text-decoration: none;
  color: var(--almost-black);
  background-color: var(--white);
}

.post-sidebar-module .sidebar-nav a:active,
.post-sidebar-module .sidebar-nav a:hover {
  border-left-color: var(--deep-blue);
  text-decoration: none;
  color: var(--almost-black);
  background-color: var(--white);
}

/* ========================================
     More Posts Section (reuses archive styles)
     ======================================== */

.post-more-posts-section {
  position: relative;
  background-image: url("/wp-content/uploads/2025/06/news-events-graphic-background-scaled.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 0;
}

.post-more-posts-section .section-heading {
  margin: 0 0 1.5rem;
}

/* ========================================
     Rich text blocks
     ======================================== */

.post-content-inner ul {
  margin: 0 1rem 0;
  padding: 0;
}

.post-content-inner ul li {
  margin-bottom: 0.5rem;
}

.post-content-inner blockquote {
  background-color: var(--cyan-20);
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  margin: 1.5rem 0;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
  color: var(--deep-blue);
}

.post-body .wp-block-image img {
  margin: 0 0 2rem 0;
  border-radius: 1rem;
}

@media (min-width: 64rem) {
  .post-content-inner {
    padding-top: 0;
  }
  .post-content-inner .post-title {
    font-size: 2.6rem;
  }
  .post-layout .info-content-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2rem;
    padding-top: 3rem;
  }

  .post-layout .info-sidebar-wrapper {
    flex: 0 0 23%;
    max-width: 23%;
  }

  .post-layout .info-main-content {
    flex: 0 0 77%;
    max-width: 77%;
  }
}