/* =========================================================
   WCS India: custom sidebar
   Styled to match /about-us/leadership/ cards.
   Loaded from astra-child/functions.php.
   ========================================================= */

/* ---------- Main content background (single posts) ---------- */
body.single-post.ast-separate-container,
body.single-post.ast-separate-container .site-content {
  background-color: #F9F6FE;
}
body.single-post.ast-separate-container .ast-article-single:not(.ast-related-post) {
  background-color: #F9F6FE;
}

/* ---------- Sidebar wrapper ---------- */
#secondary .wcs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Breathing room above the footer, every screen size */
#secondary {
  margin-bottom: 48px !important;
}

/* ---------- Cards (Leadership style) ---------- */
#secondary .wcs-card {
  background-color: #F9F6FE;
  border: 3px solid #CFA69D;
  border-radius: 32px;
  padding: 22px 26px;
  margin: 0;
}

/* Headings: Montserrat bold, Leadership accent colour, 16px */
#secondary .wcs-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.3;
  color: #B16150;
  margin: 0 0 12px;
}

/* ---------- Lists (Recent Posts, Categories) 14px ---------- */
#secondary .wcs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  line-height: 1.45;
}
#secondary .wcs-list li {
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid rgba(207, 166, 157, 0.45);
}
#secondary .wcs-list li:first-child {
  padding-top: 0;
}
#secondary .wcs-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
#secondary .wcs-list a {
  color: #1E293B;
}
#secondary .wcs-list a:hover,
#secondary .wcs-list a:focus {
  color: #148164;
}

/* Recent Posts: one line per title, cut off with "..." */
#secondary .wcs-list--posts a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Highlight the post you are reading */
#secondary .wcs-list li.is-current a {
  color: #B16150;
  font-weight: 600;
}

/* ---------- Search ---------- */
#secondary .wcs-search input[type="search"] {
  width: 100%;
  height: 42px;
  padding: 8px 18px;
  font-size: 14px;
  border: 1px solid #CFA69D;
  border-radius: 40px;
  background: #ffffff;
  color: #1E293B;
}
#secondary .wcs-search input[type="search"]:focus {
  border-color: #148164;
  border-style: solid;
}
#secondary .wcs-search-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: #148164;
  border: 0;
  border-radius: 40px;
  cursor: pointer;
}
#secondary .wcs-search-btn:hover,
#secondary .wcs-search-btn:focus {
  background: #36AD47;
  color: #ffffff;
}

/* ---------- Desktop (922px and up) ---------- */
@media (min-width: 922px) {
  /* Single posts: line the sidebar top up with the content */
  body.single-post.ast-two-container #secondary {
    margin-top: 0 !important;
  }
  /* Search, archive and other pages: space below the header */
  body:not(.single-post) #secondary {
    margin-top: 24px !important;
  }
}

/* ---------- Tablet and phone (below 922px) ---------- */
@media (max-width: 921px) {
  /* Use the full width instead of a narrow strip */
  #secondary {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 32px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Search on top, Recent Posts + Categories side by side, equal height */
  #secondary .wcs-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  #secondary .wcs-sidebar > .wcs-card:first-child {
    grid-column: 1 / -1;
  }

  /* Search field and button on one row */
  #secondary .wcs-search {
    display: flex;
    gap: 10px;
  }
  #secondary .wcs-search-btn {
    width: auto;
    margin-top: 0;
    padding: 11px 24px;
    flex-shrink: 0;
  }
}

/* ---------- Phone (below 545px): one card per row ---------- */
@media (max-width: 544px) {
  #secondary .wcs-sidebar {
    grid-template-columns: 1fr;
  }
  #secondary .wcs-card {
    border-radius: 24px;
    padding: 20px 22px;
  }
}


/* =========================================================
   CATEGORY / ARCHIVE PAGES
   Matches the Blog page: centred green heading, blue divider,
   grey cards in an even grid (instead of masonry).
   ========================================================= */

/* ---------- Background (delete this block to keep white) ---------- */
body.archive.ast-separate-container,
body.archive.ast-separate-container .site-content {
  background-color: #F9F6FE;
}

/* ---------- Hide invisible elements that create empty gaps ----------
   Astra's post filter bar and the category label on each card
   use white link text, so they took up space but could not be seen. */
body.archive .ast-post-filter,
body.archive .ast-archive-post .cat-links,
body.archive .ast-archive-post .entry-header:not(:has(*)),
body.archive .ast-archive-post .entry-content:not(:has(*)) {
  display: none !important;
}

/* ---------- Heading (Blog style) ---------- */
body.archive .ast-archive-description {
  background: transparent !important;
  padding: 32px 0 0 !important;
  margin: 0 0 36px !important;
  text-align: center;
  border: 0 !important;
}
body.archive .ast-archive-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px !important;
  font-weight: 700;
  line-height: 1.2;
  color: #148164 !important;
  margin: 0;
}
body.archive .ast-archive-title::after {
  content: "";
  display: block;
  width: 114px;
  height: 2px;
  margin: 24px auto 0;
  background: #0F70B4;
}

/* ---------- Grid instead of masonry ----------
   Overrides the inline positions the masonry script adds. */
body.archive #main .ast-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  height: auto !important;
  margin: 0 !important;
}
body.archive #main .ast-row::before,
body.archive #main .ast-row::after {
  display: none !important;
}
body.archive #main .ast-row > article.ast-archive-post {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex;
}

/* ---------- Card (Blog style) ---------- */
body.archive .ast-archive-post .ast-article-inner,
body.archive .ast-archive-post .post-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.archive .ast-archive-post .ast-article-inner {
  background: #EFEFEF !important;
  border: 1px solid #DDDDDD;
}

/* Image: same shape on every card so rows line up */
body.archive .ast-archive-post .ast-blog-featured-section {
  margin: 0 !important;
  padding: 0 !important;
}
body.archive .ast-archive-post .post-thumb-img-content img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Title */
body.archive .ast-archive-post .entry-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px !important;
  font-weight: 700;
  line-height: 1.3;
  margin: 18px 16px 10px !important;
  padding: 0 !important;
}
body.archive .ast-archive-post .entry-title a {
  color: #009659 !important;
}
body.archive .ast-archive-post .entry-title a:hover,
body.archive .ast-archive-post .entry-title a:focus {
  color: #148164 !important;
}

/* Excerpt */
body.archive .ast-archive-post .ast-excerpt-container {
  margin: 0 16px 18px !important;
  padding: 0 !important;
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1E293B;
}
body.archive .ast-archive-post .ast-excerpt-container p {
  margin: 0;
}

/* Read More and date, if switched on in the Customizer */
body.archive .ast-archive-post .read-more,
body.archive .ast-archive-post .ast-read-more-container {
  margin: -8px 16px 0 !important;
  font-size: 13px;
  font-weight: 700;
}
body.archive .ast-archive-post .read-more a,
body.archive .ast-archive-post .ast-read-more-container a {
  color: #02AC9F !important;
}
body.archive .ast-archive-post .entry-meta {
  margin: 6px 16px 16px !important;
  font-size: 12px;
  color: #5C5954;
}

/* Pagination */
body.archive .ast-pagination {
  margin-top: 36px;
}

/* Space above the footer */
body.archive #primary {
  margin-bottom: 48px !important;
}

/* Space between the cards and the sidebar on desktop */
@media (min-width: 922px) {
  body.archive.ast-right-sidebar #primary {
    padding-right: 40px !important;
    border-right: 0 !important;
  }
}

/* ---------- Responsive columns ---------- */
/* Narrower desktops with the sidebar: 2 columns */
@media (min-width: 922px) and (max-width: 1199px) {
  body.archive #main .ast-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Tablet: 2 columns */
@media (max-width: 921px) {
  body.archive #main .ast-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  body.archive .ast-archive-title {
    font-size: 32px !important;
  }
}
/* Phone: 1 column */
@media (max-width: 544px) {
  body.archive #main .ast-row {
    grid-template-columns: 1fr;
  }
  body.archive .ast-archive-title {
    font-size: 28px !important;
  }
}