/*
 Theme Name:   Astra Child
 Template:     astra
 Version:      1.0
*/



/* ============================================================
   MENTORSHIP PAGE — Structural fix toward mockup layout
   Add this CSS at the end of your existing stylesheet.
   The JS snippet goes in a script tag near the closing </body>,
   or enqueued separately — see notes below.
   ============================================================ */

/* 1. SINGLE COLUMN instead of 2-col grid */
#anspress .ap-questions {
  grid-template-columns: 1fr !important;
}

/* Card padding/spacing tuned for single-column width (mockup has
   more breathing room per card than a 2-col grid needs) */
#anspress .ap-questions-item > *:not(.ap-questions-count):not(.ap-questions-acount) {
  padding: 20px 22px 14px !important;
}
#anspress .ap-questions-title {
  font-size: .98rem !important;
}

/* 2. PERSISTENT CHECKBOX-STYLE CATEGORY LIST
   This targets the category list AFTER it's moved out of the
   dropdown by the JS below. It becomes a permanently visible
   block inside .ap-list-head, styled like a checklist. */

.lc-category-checklist {
  margin-top: 4px;
}
.lc-category-checklist .cat-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  color: #0F172A;
  margin: 4px 0 10px;
}
.lc-category-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lc-category-checklist li {
  margin-bottom: 2px;
}
.lc-category-checklist li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 4px;
  font-size: .85rem;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  border-radius: 6px;
}
.lc-category-checklist li a:hover {
  background: #F8FAFC;
}
.lc-category-checklist li a::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #CBD5E1;
  background: #fff;
  flex-shrink: 0;
  display: inline-block;
}
.lc-category-checklist li.active a::before {
  background: #4F46E5;
  border-color: #4F46E5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.lc-category-checklist li.active a {
  color: #0F172A;
  font-weight: 700;
}
.lc-category-checklist li a .count {
  font-size: .78rem;
  font-weight: 700;
  color: #94A3B8;
  margin-left: auto;
}
.lc-category-checklist li:first-child a::before {
  /* "All Categories" row gets a filled/checked look by default when no filter active */
}

/* Hide the original dropdown trigger for category (keep Order By dropdown as-is) */
#anspress .ap-dropdown.ap-filter[data-filter-type="category"] > a,
#anspress .ap-dropdown.ap-filter.ap-category-filter > a {
  display: none !important;
}



/* Hide the old Category dropdown filter now that the
   checkbox checklist (via list-head.php override) replaces it.
   filter-category is unique to this dropdown — filter-order_by
   is untouched, so sorting keeps working exactly as before. */
#anspress .ap-dropdown.ap-filter.filter-category {
    display: none !important;
}





/* CORRECTION: the mockup is actually 2 columns, not 1.
   This overrides the earlier single-column change. */
#anspress .ap-questions {
  grid-template-columns: repeat(2, 1fr) !important;
  
  
  
  
  
  
  html {
  overflow-x: hidden;
  width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}
* {
  max-width: 100vw;
}
.main-header-bar,
.ast-primary-header-bar,
.main-header-bar-navigation,
.main-header-menu,
#primary-menu,
.ast-desktop-menu {
  flex-wrap: wrap !important;
  max-width: 100% !important;
}