/* Brand Guideline pane — rules the live site ships in its page-head <style>
 * block (not in webflow.css). They style the active states of the left-hand
 * navigation and the right-hand CONTENTS mini-TOC. Everything else the pane
 * needs already lives in webflow.css via the original Webflow class names. */

/* Active sidebar item: navy, and bold when it belongs to a top-level group. */
.brand-guideline-menu.c-active {
  color: #10405a;
}

.brand-guideline-menu-group[data-group-name] .brand-guideline-menu.c-active {
  color: #10405a;
  font-weight: bold;
}

/* Active CONTENTS link: bold navy, prefixed with a subtle "| " marker. */
.heading-links.c-active {
  font-weight: bold;
  color: #10405a;
}

.heading-links.c-active div:before {
  content: "| ";
  color: #c4c4c4;
}

/* Sticky offset for the fixed scroll menu variant used on the live page. */
.div-block-262 {
  position: fixed;
  top: 230px;
}

/* The injected sidebar <li> items act as buttons in this rebuild. */
.brand-guideline-page-links li[data-page] {
  cursor: pointer;
}

/* Accordion sub-lists: collapsed by default, expanded when JS adds `sg-open`
 * (see GuidelinePane). Animate via max-height + opacity. `data-parent-group-name`
 * marks the sub-item <ul>s; the single-item group-title <ul>s stay visible. */
.brand-guideline-page-links ul[data-parent-group-name] {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
}

.brand-guideline-page-links ul[data-parent-group-name].sg-open {
  max-height: 600px;
  opacity: 1;
}