/* Glossary Frontend Styles */

/* Usage List Shortcode */

/* overall block */
.ad-glossary-usage-list,
ul.ad-usage-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* each row */
.ad-usage-item {
  border-bottom: 1px solid rgba(0,0,0,0.04);
  background: #f6f6f6;
}

/* clickable header */
.ad-usage-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: #fefdfb;
  transition:  0.15s ease;
  border-left: 4px solid transparent;
}

.ad-usage-header:hover {
  background: #fffaf1;
  border-left-color: #bd9a4e;
}

/* arrow */
.ad-toggle-icon {
  display: inline-block !important;
  width: 1rem;
  text-align: center;
  color: #34583b !important;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  /* Override any theme styles that might add SVG backgrounds */
  background: none !important;
  background-image: none !important;
}

/* Hide any pseudo-elements that might be adding SVGs */
.ad-toggle-icon::before,
.ad-toggle-icon::after {
  background: none !important;
  background-image: none !important;
}

/* title + meta */
.ad-usage-title {
  font-weight: 600;
  color: #2f3b1d;
  font-family: "Crimson Text", serif;
  margin-right: 0.5rem;
}

.ad-usage-meta {
  font-size: 0.8rem;
  color: #777063;
  font-style: italic;
}

/* collapsible body */
.ad-context-collapsible {
  display: none; /* hidden by default */
  background: #ffffff;
  padding: 0.75rem 1.25rem 1rem 1.25rem;
  border-left: 3px solid rgba(52, 88, 59, 0.3);
}

/* when JS sets display:block, we can add a class if you want */
.ad-usage-item.is-open .ad-context-collapsible {
  display: block;
}

/* "Context:" label */
.ad-usage-context > strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: #484030;
  letter-spacing: 0.01em;
}

/* each snippet line */
.ad-context-snippet {
  font-size: 0.9rem;
  line-height: 1.35;
  color: #3c3a33;
  background: #fffdf6;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.35rem;
  border: 1px solid rgba(189,154,78,0.05);
  white-space: normal;
}

/* highlight the term inside the snippet */
.ad-term-highlight {
  background: #d8ebd8;
  color: #163919;
  padding: 0 .25em;
  border-radius: 4px;
  font-weight: 600;
}

/* optional: subtle border around the whole "Where is this term used?" panel */
.ad-glossary-usage-wrapper {
  background: #f8f8f8;
  border: 1px solid rgba(189,154,78,0.4);
  border-radius: 10px;
  overflow: hidden;
}



/* end Usage List Shortcode */


/*  most used terms */
/* list layout */
.ad-most-used-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* pill */
.ad-most-used-item {
  display: flex;
  align-items: center;
  gap: 0.45em;              /* space between badge and text */
  background: #fff8ed;
  border: 1px solid #e3d9b8;
  border-radius: 999px;
  padding: 0.35em 1.1em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all .2s ease;
}

/* badge is now IN the flow, not absolute */
.ad-most-used-item::before {
  content: attr(data-rank);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #6fa57d 0%, #365d40 75%);
  color: #fffef6;
  font-size: 0.7rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  flex: 0 0 1.5em;  /* lock size */
}

/* link/text */
.ad-term-link {
  text-decoration: none;
  color: #2b2b2b;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap; /* so short terms stay tidy */
}

.ad-most-used-item:hover {
  background: #f8f2e3;
  border-color: #d3b679;
  transform: translateY(-1px);
}

.ad-most-used-item:hover {
  background: #fdf9f0;
  border-color: #d4b97d;
  transform: translateY(-2px);
}
.ad-term-link {
  font-family: var(--body-font, 'Lora', serif);
  font-size: 0.92rem;
}



/* Related Terms Shortcode */
/* Container */
.ad-glossary-related {
  
}

/* Title */
.ad-related-title {
  font-family: var(--heading-font, "Crimson Text", serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: #3b361d;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(180,160,120,0.25);
  padding-bottom: 0.25rem;
}

/* List layout */
.ad-related-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each item card */
.ad-related-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 0.25rem 1rem;
  transition: all 0.2s ease;
}

.ad-related-item:hover {
  border-color: rgba(163, 129, 52, 0.4);
  background: #fffaf1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Link (term title) */
.ad-term-link {
  font-weight: 600;
  color: #4a5d33;
  text-decoration: none;
  font-family: var(--heading-font, "Crimson Text", serif);
  font-size: 1.05rem;
  
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.ad-term-link:hover {
  color: #2f4628;
  text-shadow: 0 0 5px rgba(187, 159, 92, 0.35);
}

/* Excerpt text */
.ad-term-excerpt {
  font-family: var(--body-font, "Lora", serif);
  font-size: 0.92rem;
  color: #5b5244;
  line-height: 1.4;
  opacity: 0.95;
}

/* optional: add subtle fade for trailing "..." */
.ad-term-excerpt::after {
  content: "";
  display: inline-block;
  width: .5ch;
}

/* Responsive */
@media (max-width: 600px) {
  .ad-glossary-related {
    padding: 1.25rem;
  }
  .ad-term-link {
    font-size: 1rem;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ad-most-used-item:before {
        position: static;
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 4px;
    }
    
    .ad-most-used-list {
        padding-left: 0;
    }
    
    .ad-term-stats {
        display: block;
        margin-top: 4px;
        font-size: 0.8em;
    }
}