/* CC Term Tree – Pills layout (content width) */

.cc-term-tree { 
  margin-top: 1rem;
  --cc-term-tree-leaf-bg: rgba(98, 70, 234, 0.10);
  --cc-term-tree-leaf-border: rgba(98, 70, 234, 0.22);
}

/* Top level wraps like pills */
.cc-term-tree > .cc-term-tree__list{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  list-style:none;
  padding:0;
  margin:0.5rem 0;
}

.cc-term-tree .cc-term-tree__item{
  margin:0;
}

/* Remove card look for parents */
.cc-term-tree .cc-term-tree__details{
  border:0;
  background:transparent;
  padding:0;
}

/* Hide native marker */
.cc-term-tree summary{
  list-style:none;
}
.cc-term-tree summary::-webkit-details-marker{
  display:none;
}

/* Parent pill */
.cc-term-tree .cc-term-tree__summary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.45rem 0.85rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.15);
  background:rgba(0,0,0,0.03);
  white-space:nowrap;
}

.cc-term-tree .cc-term-tree__summary::after{
  content:"▸";
  opacity:0.7;
}
.cc-term-tree details[open] > .cc-term-tree__summary::after{
  content:"▾";
}

/* Expanded panel goes full width under pills */
.cc-term-tree .cc-term-tree__panel{
  flex-basis:100%;
  width:100%;
  margin-top:0.35rem;
}

/* Child list indentation */
.cc-term-tree .cc-term-tree__panel > .cc-term-tree__list{
  margin-top:0.35rem;
  padding-left:0.75rem;
  border-left:2px solid rgba(0,0,0,0.08);
  list-style:none;
}

/* Leaf pill */
.cc-term-tree .cc-term-tree__leaf{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  width:auto;
  padding:0.45rem 0.85rem;
  border-radius:999px;
  border:1px solid var(--cc-term-tree-leaf-border);
  background:var(--cc-term-tree-leaf-bg);
  text-decoration:none;
  white-space:nowrap;
}

.cc-term-tree .cc-term-tree__leaf::after{
  content:"›";
  opacity:0.7;
}

.cc-term-tree .cc-term-tree__leaf:hover{
  text-decoration:none;
}

.cc-term-tree .cc-term-tree__link{
  text-decoration:none;
}

.cc-term-tree .cc-term-tree__count{
  opacity:0.7;
  font-size:0.95em;
}


/* Nav links: allow the theme's existing .main-header__subtitle a styling to apply.
   These rules only add a bit of spacing and an optional current-state tweak. */
.cc-term-tree__archive-nav{ margin: 0.75rem 0 0 0; }
.cc-term-tree__navlink.is-current{ outline: 2px solid rgba(0,0,0,0.10); outline-offset: 2px; }


/* === WordBench-style pills (expandable tree) ===
   Use: [cc_term_tree taxonomy="..." style="wordbench_pills"]
   Aim: match the existing purple pill buttons used in the directory header.
*/

.cc-term-tree--wordbench_pills{
  --cc-wb-pill-bg: #5b3fd6;      /* adjust to match your theme purple */
  --cc-wb-pill-bg-hover: #4f35c3;
  --cc-wb-pill-text: #ffffff;
}

.cc-term-tree--wordbench_pills > .cc-term-tree__list{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  list-style:none;
  padding:0;
  margin:0.5rem 0;
}

.cc-term-tree--wordbench_pills .cc-term-tree__item{ margin:0; }

.cc-term-tree--wordbench_pills .cc-term-tree__details{
  border:0;
  background:transparent;
  padding:0;
}

.cc-term-tree--wordbench_pills summary{
  list-style:none;
}
.cc-term-tree--wordbench_pills summary::-webkit-details-marker{
  display:none;
}

/* Pill base */
.cc-term-tree--wordbench_pills .cc-term-tree__pill{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.55rem 0.95rem;
  border-radius:999px;
  background:var(--cc-wb-pill-bg);
  color:var(--cc-wb-pill-text);
  text-decoration:none;
  white-space:nowrap;
  border:0;
}

.cc-term-tree--wordbench_pills .cc-term-tree__pill:hover{
  background:var(--cc-wb-pill-bg-hover);
  text-decoration:none;
}

/* Parent indicator */
.cc-term-tree--wordbench_pills .cc-term-tree__pill--parent::after{
  content:"▾";
  opacity:0.9;
  transform: translateY(-1px);
}
.cc-term-tree--wordbench_pills details:not([open]) > .cc-term-tree__pill--parent::after{
  content:"▸";
}

/* Expanded panel sits full-width below */
.cc-term-tree--wordbench_pills .cc-term-tree__panel{
  flex-basis:100%;
  width:100%;
  margin-top:0.5rem;
}

/* Children list inside panel as pills row */
.cc-term-tree--wordbench_pills .cc-term-tree__panel > .cc-term-tree__list{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  list-style:none;
  padding:0;
  margin:0;
}

/* "All in X" pill variant */
.cc-term-tree--wordbench_pills .cc-term-tree__pill--all{
  background: rgba(91, 63, 214, 0.15);
  color: #2b1b6f;
  border: 1px solid rgba(91, 63, 214, 0.25);
}
.cc-term-tree--wordbench_pills .cc-term-tree__pill--all:hover{
  background: rgba(91, 63, 214, 0.22);
}


/* === Archive header nav with child drawer (WordBench) ===
   The purple pill look comes from the site's existing .main-header__subtitle a styling.
   These rules add layout and drawer styling without fighting the theme.
*/
.cc-tt-nav{
  margin-top: 0.75rem;
}

/* Ensure details doesn't show native marker; our caret is part of summary */
.cc-tt-nav summary{
  list-style: none;
}
.cc-tt-nav summary::-webkit-details-marker{
  display:none;
}

/* Make summary behave like the purple pill links.
   We DON'T set background colours here; the theme already does that for links in the header.
   For summary (not an <a>), we approximate the same shape and spacing. */
.cc-tt-nav__summary{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* Give summary a purple look if theme only styles <a>.
   Tweak these if needed; they are intentionally close to your existing pill buttons. */
.cc-tt-nav__summary{
  background: #5b3fd6;
  color: #ffffff;
}
.cc-tt-nav__summary:hover{
  background:#4f35c3;
}

/* Keep details inline with the other pills */
.cc-tt-nav__item{
  display: inline-block;
}

/* Drawer: outlined section below its parent pill */
.cc-tt-nav__drawer{
  margin-top: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Child “outlined pills” (smaller text) */
.cc-tt-nav__child{
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #ffffff;
  text-decoration: none;
  font-size: 0.92em;
  line-height: 1.2;
}

.cc-tt-nav__child:hover{
  text-decoration: none;
  border-color: rgba(0,0,0,0.28);
}

.cc-tt-nav__child--all{
  font-weight: 600;
}

/* Current state hint */
.cc-tt-nav__pill.is-current,
.cc-tt-nav__summary.is-current{
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18) inset;
}

.cc-tt-nav__child.is-current{
  border-color: rgba(0,0,0,0.45);
  font-weight: 600;
}

/* Caret rotates when open (purely decorative) */
.cc-tt-nav__item[open] .cc-tt-nav__caret{
  transform: rotate(180deg);
}
.cc-tt-nav__caret{
  display:inline-block;
  transition: transform 120ms ease-in-out;
}


/* === Hover drawers menu for archive header === */
.cc-tt-menu{ position: relative; }

.cc-tt-menu__topitem{
  position: relative;
  display: inline-block;
}

.cc-tt-menu__caret{ margin-left: 0.35rem; }
.cc-tt-menu__tri{ margin-left: 0.45rem; }

.cc-tt-menu__drawer{
  display: none;
  box-sizing: border-box;
  z-index: 9999;
}

.cc-tt-menu__topitem.has-children.is-open > .cc-tt-menu__drawer--below,
.cc-tt-menu__topitem.has-children:hover > .cc-tt-menu__drawer--below{
  display: flex;
}

.cc-tt-menu__childwrap.has-children.is-open > .cc-tt-menu__drawer--right,
.cc-tt-menu__childwrap.has-children:hover > .cc-tt-menu__drawer--right{
  display: flex;
}

.cc-tt-menu__drawer--below{
  position: absolute;
  left: 0;
  top: calc(100% + 0.45rem);
  min-width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 10px;
  padding: 0.5rem;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.cc-tt-menu__child{
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  font-size: 0.92em;
  line-height: 1.2;
  white-space: nowrap;
}
.cc-tt-menu__child:hover{ border-color: rgba(0,0,0,0.30); text-decoration:none; }
.cc-tt-menu__child.is-current{ border-color: rgba(0,0,0,0.45); font-weight:700; }
.cc-tt-menu__child--all{ font-weight:700; }

.cc-tt-menu__childwrap{ position: relative; display:inline-block; }

.cc-tt-menu__drawer--right{
  position: absolute;
  left: calc(100% + 0.45rem);
  top: -0.5rem;
  min-width: 12rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 10px;
  padding: 0.5rem;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.cc-tt-menu__grand{
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  font-size: 0.92em;
  line-height: 1.2;
  white-space: nowrap;
}
.cc-tt-menu__grand:hover{ border-color: rgba(0,0,0,0.30); text-decoration:none; }
.cc-tt-menu__grand.is-current{ border-color: rgba(0,0,0,0.45); font-weight:700; }
.cc-tt-menu__grand--all{ font-weight:700; }



/* === v14 refinements === */

/* Layout: keep top pills on one line on desktop where possible */
.cc-tt-menu{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  align-items:center;
}
@media (min-width: 980px){
  .cc-tt-menu{ flex-wrap:nowrap; gap:0.45rem; }
}

/* Slightly smaller top pills (so all 6 fit on desktop more easily) */
.cc-tt-menu__toplink{
  font-size: 0.95em;
  padding: 0.50rem 0.85rem;
  border-radius: 10px; /* small radii feel */
}

/* If the theme sets padding via higher specificity, this helps */
.main-header__subtitle .cc-tt-menu__toplink{
  font-size: 0.95em !important;
  padding: 0.50rem 0.85rem !important;
  border-radius: 10px !important;
}

/* Reduce hover gap and add a 'bridge' so the menu doesn't drop out */
.cc-tt-menu__drawer--below{
  top: calc(100% + 0.18rem);
}
.cc-tt-menu__drawer--below::before{
  content:"";
  position:absolute;
  left:0;
  top:-10px;
  width:100%;
  height:10px;
  background:transparent;
}

/* Subcategory items: plain black text on white (not big buttons) */
.cc-tt-menu__drawer--below,
.cc-tt-menu__drawer--right{
  gap: 0.15rem;
}

.cc-tt-menu__child,
.cc-tt-menu__grand{
  border:0;
  background:transparent;
  padding:0.25rem 0.2rem;
  border-radius:0;
  color:#111111;
  font-size:0.90em;
}

.cc-tt-menu__child:hover,
.cc-tt-menu__grand:hover{
  text-decoration: underline;
  border:0;
}

.cc-tt-menu__child.is-current,
.cc-tt-menu__grand.is-current{
  font-weight:700;
  text-decoration: underline;
}

/* Keep "All in X" slightly stronger */
.cc-tt-menu__child--all,
.cc-tt-menu__grand--all{
  font-weight:700;
}

/* Make child wrappers align nicely */
.cc-tt-menu__drawer--below{
  align-items:flex-start;
}



/* === v15: make drawer items compact black text on white (override theme pill link styling) === */
.cc-tt-menu__drawer--below,
.cc-tt-menu__drawer--right{
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
}

/* Force drawer links to NOT inherit the purple pill styling from .main-header__subtitle a */
.main-header__subtitle .cc-tt-menu__drawer--below a,
.main-header__subtitle .cc-tt-menu__drawer--right a{
  background: transparent !important;
  color: #111111 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.18rem 0 !important;
  margin: 0 !important;
  font-size: 0.90em !important;
  line-height: 1.25 !important;
  display: block !important;
  white-space: nowrap;
}

/* Make the drawers more list-like and space efficient */
.cc-tt-menu__drawer--below,
.cc-tt-menu__drawer--right{
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Current item highlight */
.main-header__subtitle .cc-tt-menu__drawer--below a.is-current,
.main-header__subtitle .cc-tt-menu__drawer--right a.is-current{
  font-weight: 700 !important;
  text-decoration: underline;
}

/* Hover style */
.main-header__subtitle .cc-tt-menu__drawer--below a:hover,
.main-header__subtitle .cc-tt-menu__drawer--right a:hover{
  text-decoration: underline;
}

/* Keep the little triangles visible */
.cc-tt-menu__tri{
  color: #111111;
}



/* === v16: prevent right-hand (grandchild) drawer hover 'disconnect' === */
/* Reduce the gap and add an invisible hover bridge between the child item and its right drawer */
.cc-tt-menu__drawer--right{
  left: calc(100% + 0.18rem); /* was 0.45rem */
}

/* Make the hover target extend into the gap */
.cc-tt-menu__childwrap.has-children{
  padding-right: 0.25rem;
}

.cc-tt-menu__childwrap.has-children::after{
  content:"";
  position:absolute;
  right:-10px;
  top:-6px;
  width:10px;
  height:calc(100% + 12px);
  background:transparent;
}

/* Bridge on the drawer itself (covers the remaining gap) */
.cc-tt-menu__drawer--right::before{
  content:"";
  position:absolute;
  left:-10px;
  top:0;
  width:10px;
  height:100%;
  background:transparent;
}


/* === v17 Mobile: convert hover drawers to stacked tap-friendly panels ===
   On small screens, right-hand flyouts can go off-screen and become unclickable.
   This turns level-2 drawers into nested, indented panels below their parent.
*/
@media (max-width: 780px){

  /* Let the top pills wrap naturally */
  .cc-tt-menu{
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Make the first drawer a full-width panel below the pill */
  .cc-tt-menu__drawer--below{
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.35rem !important;
  }

  /* Each top item becomes a block so its drawer spans the content width */
  .cc-tt-menu__topitem{
    display: block;
  }

  /* Children as a vertical list (space-efficient on mobile) */
  .cc-tt-menu__drawer--below{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Level-2 drawer becomes an indented nested panel instead of a flyout */
  .cc-tt-menu__drawer--right{
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.25rem 0 0.25rem 0.75rem !important;
    padding-left: 0.6rem !important;
    border-left: 2px solid rgba(0,0,0,0.12) !important;
  }

  /* Remove the hover-bridge pseudo elements on mobile */
  .cc-tt-menu__childwrap.has-children::after,
  .cc-tt-menu__drawer--right::before{
    display: none !important;
    content: none !important;
  }
}

/* Top-level term buttons behave like pills */
.cc-tt-menu__toplink{
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.cc-tt-menu__topitem{
  flex: 0 0 auto;
}

/* --- CC Directory Category Browser: menu layout --- */
/* Applies to both injected and nav renders */
.cc-term-tree--archive-injected .cc-tt-menu[data-cc-tt-menu="1"],
.cc-term-tree--nav .cc-tt-menu[data-cc-tt-menu="1"],
.cc-term-tree .cc-tt-menu[data-cc-tt-menu="1"]{
  max-width: 100%;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;       /* single line when it fits; otherwise wraps onto additional lines */
  gap: 0.6rem;
  align-items: center;
}

/* Ensure items behave as flex items (theme may set inline-block) */
.cc-term-tree--archive-injected .cc-tt-menu__topitem,
.cc-term-tree--nav .cc-tt-menu__topitem,
.cc-term-tree .cc-tt-menu__topitem{
  display: block;
  position: relative;
}

/* Keep each button label on one line; wrapping happens between buttons */
.cc-term-tree--archive-injected .cc-tt-menu__toplink,
.cc-term-tree--nav .cc-tt-menu__toplink,
.cc-term-tree .cc-tt-menu__toplink{
  white-space: nowrap;
}

/* Safari flexbox safety */
.cc-term-tree--archive-injected .cc-tt-menu[data-cc-tt-menu="1"],
.cc-term-tree--nav .cc-tt-menu[data-cc-tt-menu="1"],
.cc-term-tree .cc-tt-menu[data-cc-tt-menu="1"]{ min-width: 0; }