/* ==========================================================
   CASE STUDY TAGS (the header's tag pills, class case-study-tags; script.js)
   Desktop: the pills as they are, no button. Phones (Figma "Case Study MOBILE"): a "VIEW TAGS"
   button (its type: the typography style tags-toggle, given by script.js) and the pills only once
   it is pressed.
   ========================================================== */

.case-study-tags-toggle {
  display: none;
}

/* A case study's tags (the post-terms block in parts/case-study-heading.html; the row — flex, wrap,
   10px apart, the yellow — is classes on the block): each a pill. Their type is the typography
   style post-tags on the block; the links take it rather than the a style's */
.wp-block-post-terms.taxonomy-post_tag a {
  font: inherit;
  /* The pill's own height (the category lists in the same type keep its 150%) */
  line-height: 31px;
  color: var(--mcg-color-text-main);
  border: 2px solid var(--mcg-color-text-main);
  border-radius: 50px;
  padding-inline: 1.5em;
  padding-block: 0.5em;
}

/* The overview's tag filter (block kloos/case-study-tags): the tags in a row, 30px apart (Figma
   "Case Study Overview"); the one filtered by, and the one pointed at, underlined */
.case-study-tag-filter {
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 10px;
}

.case-study-tag-filter a {
  color: inherit;
  text-decoration: none;
}

.case-study-tag-filter a:is(.is-active, :hover, :focus-visible) {
  text-decoration: underline;
}

/* The blog's categories (the categories block, classes blog-categories-list and case-study-tags:
   template home, part archive-heading) as the case studies' tags: in a row 30px apart is the
   composite class blog-categories-list; here the links, the current one underlined */
.blog-categories-list li {
  margin: 0;
}

.blog-categories-list a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.blog-categories-list :is(.current-cat > a, a:hover, a:focus-visible) {
  text-decoration: underline;
}

/* Filtered (Figma "Case Studies Tag Page"): the circled arrow back to all case studies (the
   submenu's arrow, pointing left, 34px) 20px before the tag */
.case-study-tag-filter.is-current {
  align-items: center;
  column-gap: 20px;
}

.case-study-tag-back {
  display: block;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background-color: currentColor;
  -webkit-mask: url("../../assets/icons/submenu-arrow.svg") center / contain no-repeat;
  mask: url("../../assets/icons/submenu-arrow.svg") center / contain no-repeat;
  transform: scaleX(-1);
}

.case-study-tag-back:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@container (max-width: 768px) {
  .case-study-tags-toggle {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
  }

  .case-study-tags-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .case-study-tags.is-collapsible:not(.is-open) {
    display: none;
  }

  .case-study-tags.is-open {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }
}